canvas为什么setInterval内的函数还要重新定位坐标

lyf1991a 2015-06-09 12:03:58
自己做个时钟,我是用setInterval来循环,但是为什么如果我setInterval函数内没有重新translate的话它就回到原点了?

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var outRadius = 200;
var innerRadius = 190;
var hour, minute, second;
var savedCanvas;

context.save();
context.textAlign = "center";
context.textBaseline = "middle";
context.font = "14px Arial";
context.translate(250, 250);
//画圆
context.beginPath();
context.arc(0, 0, outRadius, 0, Math.PI * 2);
context.stroke();

//画刻度
for(var i = 0; i < 60; i++){
context.beginPath();
context.moveTo(outRadius * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),
outRadius * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));
if(i % 5 == 0){
var text = "12";
context.lineTo((innerRadius - 10) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),
(innerRadius - 10) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));
if(i != 0){
text = (i / 5).toString();
}
context.strokeText(text, (innerRadius - 24) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),
(innerRadius - 24) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));
}
context.lineTo(innerRadius * Math.cos(-Math.PI / 2 + (Math.PI / 30 * i)),
innerRadius * Math.sin(-Math.PI / 2 + (Math.PI / 30 * i)));
context.stroke();
}
//画圆心
context.beginPath();
context.arc(0, 0, 5, 0, Math.PI * 2);
context.fill();

savedCanvas = context.getImageData(0, 0, canvas.width, canvas.height);

//循环时间
setInterval(drawPoninter, 1000);

function drawPoninter(){
hour = new Date().getHours();
minute = new Date().getMinutes();
second = new Date().getSeconds();
context.putImageData(savedCanvas, 0, 0, 0, 0, canvas.width, canvas.height);

context.save();
context.translate(250, 250);
//画时针
context.beginPath();
context.moveTo(0, 0);
context.lineTo((outRadius - 100) * Math.cos(-Math.PI / 2 + (Math.PI / 6 * hour)),
(outRadius - 100) * Math.sin(-Math.PI / 2 + (Math.PI / 6 * hour)));
context.stroke();

//画分针
context.beginPath();
context.moveTo(0, 0);
context.lineTo((outRadius - 80) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * minute)),
(outRadius - 80) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * minute)));
context.stroke();

//画秒针
context.beginPath();
context.moveTo(0, 0);
context.lineTo((outRadius - 50) * Math.cos(-Math.PI / 2 + (Math.PI / 30 * second)),
(outRadius - 50) * Math.sin(-Math.PI / 2 + (Math.PI / 30 * second)));
context.stroke();

context.restore();
}

context.restore();
};
</script>
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="display: block; margin: 30px auto; border: 1px solid #ccc; color: rgba(100, 140, 230, 0.5);"></canvas>
</body>
</html>
...全文
99 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
KK3K2005 2015-06-09
  • 打赏
  • 举报
回复
context.save(); //保存当前canvas的数据状态 //。。。。 context.restore(); 恢复到上一个save保存的状态 所以你执行玩 canvas又恢复到了 初始状态

87,942

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧