canvas绘制时钟及注释及save和restore的用法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
window.onload = function(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
setInterval("draw()",1000);
}
function draw(){
var radius = Math.min(canvas.width/2,canvas.height/2)-25; //表盘半径
var cx = canvas.width/2;
var cy = canvas.height/2;
context.save(); //保存当前绘制的时钟
context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle = '#fff';
context.strokeStyle = '#f00';
context.beginPath();
context.arc(cx,cy,radius,0,Math.PI*2,true); //true逆时针
context.fill();
context.stroke();
context.closePath();//关闭路径一般不需要，因为开始下一个路径就自动关闭上一个路径
context.restore();
var r = radius-10;
context.font = 'bold 16px 微软雅黑';
function Drawtext(text,x,y){
context.save();
x -=(context.measureText(text).width/2);//返回文字的宽度
y+=9;
//数字任意
context.beginPath();
// context.translate(x,y);平移笔尖可以直接省略
context.fillText(text,x,y);
context.restore();
}

Drawtext('1', cx + (0.5 * r), cy - (0.88 * r));
Drawtext('2', cx + (0.866 * r), cy - (0.5 * r));
Drawtext('3', cx + radius - 10,cy);
Drawtext('4', cx + (0.866 * r), cy + (0.5 * r));
Drawtext('5', cx + (0.5 * r), cy + (0.866 * r));
Drawtext('6', cx, cy + r);
Drawtext('7', cx - (0.5 * r), cy + (0.866 * r));
Drawtext('8', cx - (0.866 * r), cy + (0.49 * r));
Drawtext('9', cx - radius + 10, cy);
Drawtext('10',cx - (0.866 * r),cy - (0.50 * r));
Drawtext('11', cx - (0.51 * r), cy - (0.88 * r));
Drawtext('12', cx, 35);
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var a = ((h/12)*Math.PI*2)-1.57+((m/60)*0.524);//0.524为一个大格（小时）所对应的deg,-1.57:1.57为三个大格，因为绘制时在3点处绘制，但计算时间时是从12开始。
context.save();//
context.fillStyle = 'white';
context.beginPath();
context.arc(cx,cy,3,0,Math.PI*2,false);
context.closePath();
context.fill();
context.lineWidth=3;
context.fillStyle = 'skyblue';
context.strokeStyle = 'skyblue';
context.beginPath();
context.arc(cx,cy,radius-95,a+0.001,a,true);//要绘制圆弧必须有弧度差，时钟指针
context.lineTo(cx,cy); //画线。否则只有点，时钟的线会消失
context.arc(cx,cy,radius-50,((m/60)*6.28)-1.57,((m/60)*6.28)-1.57,false);//分钟时针
context.lineTo(cx,cy); //画线。否则只有点，时钟的线会消失
context.arc(cx,cy,radius-30,((s/60)*6.28)-1.57,((s/60)*6.28)-1.57,false); //秒针指针
context.lineTo(cx,cy);
context.closePath();
context.fill();
context.stroke();
context.restore(); //
var hours = String(h);
var minutes = String(m);
var seconds = String(s);
if(hours.length == 1){h = '0'+h}
if(minutes.length == 1){m = '0'+m}
if(seconds.length == 1){s = '0'+s}
var str = h+':'+m+':'+s;
Drawtext(str,cx,cy+radius+12);
}

</script>
</body>
</html>

canvas.save( )：用来保存Canvas的状态

- canvas.restore( )：用来恢复Canvas旋转、缩放等之后的状态，当和canvas.save( )一起使用时，恢复到canvas.save( )保存时的状态。

巴特西

canvas绘制时钟及注释及save和restore的用法

最新文章

热门文章