1、canvas画布常用属性：width、height，使用canvas时首先需要获取画布：
var can = document.getElementById("canvas");
var ctx = can.getContext('2d');在画布上每一笔都会有一个开始、结束，否则画出来的效果会连在一起
ctx.beginPath(); 。。。 ctx.closePath();
1）stroke：非填充画法；
2）fill：填充画法；
ctx.beginPath(); ctx.fillStyle="black"; ctx.lineWidth=2; ctx.arc(250,250,5,0,360*Math.PI/180,true); ctx.fill(); ctx.closePath();
ctx.beginPath(); ctx.strokeStyle="black"; ctx.lineWidth=8; ctx.moveTo(0,-150); ctx.lineTo(0,10); ctx.stroke(); ctx.closePath();
1）直线：ctx.moveTo(x,y);ctx.lineTo(x,y);
2）圆： arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；
3）矩形：
fillRect(X,Y,Width,Height)；
strokeRect(X,Y,Width,Height)；
4、坐标：
1）translate(x,y):把坐标系原点设置为x,y.以后的坐标都是相对于这个标准的。
2）rotate（90 * Math.PI / 180） 按顺时针旋转90度。
3）save()：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
4）restore()：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。
5)clearRect(x,y,width,height);清除区域；
实例：小时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>time</title>
<style type="text/css">
canvas{border:dashed 2px #CCC;margin: auto;}
</style>
<script type="text/javascript">
var ctx = null;
function aa() {
var now = new Date();
var s=now.getSeconds(),m=now.getMinutes(),h=now.getHours();
h = h+ m/60;
h=h>=12?h-12:h;
ctx.clearRect(0,0,500,500); ///初始化画布
//画表盘
ctx.beginPath();
ctx.strokeStyle ="blue";
ctx.lineWidth=10;
ctx.arc(250,250,200,0,360*Math.PI/180,true);
ctx.stroke();
ctx.closePath();
//画刻度
for (var i=0;i<60;i++) {
if (i%5 ==0 ) {
ctx.save();
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle="black";
ctx.lineWidth=8;
//alert(i*30);
ctx.moveTo(0,-190);
ctx.lineTo(0,-170);
ctx.stroke();
ctx.closePath();
ctx.restore();
} else {
ctx.save();
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle="black";
ctx.lineWidth=4;
//alert(i*30);
ctx.moveTo(0,-190);
ctx.lineTo(0,-180);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
//时针
ctx.save();
ctx.translate(250,250);
ctx.rotate(h*30*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle="black";
ctx.lineWidth=8;
//alert(i*30);
ctx.moveTo(0,-150);
ctx.lineTo(0,10);
ctx.stroke();
ctx.closePath();
ctx.restore();
//分针
ctx.save();
ctx.translate(250,250);
ctx.rotate(m*6*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle="#abcdef";
ctx.lineWidth=5;
//alert(i*30);
ctx.moveTo(0,-160);
ctx.lineTo(0,15);
ctx.stroke();
ctx.closePath();
ctx.restore();
//秒针
ctx.save();
ctx.translate(250,250);
ctx.rotate(s*6*Math.PI/180);
ctx.beginPath();
ctx.strokeStyle="red";
ctx.lineWidth=2;
ctx.moveTo(0,-170);
ctx.lineTo(0,20);
ctx.stroke();
ctx.closePath();
ctx.restore();
//中心点
ctx.save();
ctx.beginPath();
ctx.fillStyle="black";
ctx.arc(250,250,5,0,360*Math.PI/180,true);
ctx.fill();
ctx.closePath();
ctx.restore();
}
window.onload = function() {
var can = document.getElementById("canvas");
ctx = can.getContext('2d');
//aa();
}
setInterval(aa,1000);
</script>
</head>
<body >
<canvas id="canvas" width=500px; height=500px;></canvas>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/liuxiao723846/article/details/47082835
