弧钟每分钟都会将自己重置到错误的程度
Arc clock resetting itself to the wrong degree each minute
我正在为我的网站制作一个弧形时钟。一般的想法是,当它已经满一分钟时,就会有一个完整的圆圈,然后它会重置为无圆圈并开始设置动画。
我遇到的问题是它不会重置到正确的位置。
以下是相关代码:
Javascript:
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
//secondValue = ((-.5 * Math.PI)*(60-seconds)/60);
ctx.beginPath();
ctx.arc(c.width/2,c.height/2,100,(360),((360/60)*seconds),false);
ctx.lineWidth = 10;
// line color
ctx.strokeStyle = 'white';
ctx.stroke();
// bind event handler to clear button
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
当Canvas Context2d使用弧度时,第一个问题是您试图使用度。您需要将角度转换为弧度:
ctx.arc(c.width/2,c.height/2,100,(360) * (Math.PI / 180),
((360/60) * (Math.PI / 180) *seconds),false);
显然,你可以稍微简化一下。
相关文章:
- Node.js v6.2.0类扩展不是函数错误
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 试图在引导模式内动态生成图表,得到offsetWidth错误
- 为什么会出现错误;未捕获的类型错误:undefined不是函数;
- 我如何修复包含在captcha的addthis中的错误
- 同样,同样的错误'ahorcado.js:26未捕获类型错误:无法读取属性'beginPath'
- 节点是否需要模块传递带有方括号的arg?这是个错误吗
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- CKFinder 3为所选文件返回错误的URL
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 铬:“;未捕获的语法错误:意外的标记:"
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- 相位器状态未捕获参考错误
- /undefined在我的404错误日志中多次出现
- Javascript未捕获语法错误意外的标识符错误
- javascript:如何在antlr生成的Lexer中进行错误处理
- Angularjs工厂注入错误
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- 弧钟每分钟都会将自己重置到错误的程度