html5之canvas基础一

html5之canvas基础1

1、canvas画布常用属性：width、height，使用canvas时首先需要获取画布：

var can = document.getElementById("canvas");
var ctx = can.getContext('2d');

在画布上每一笔都会有一个开始、结束，否则画出来的效果会连在一起

ctx.beginPath();
。。。
ctx.closePath();

2、画笔的两种画法：

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();

3、常见图形：

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>

html5之canvas基础一

相关推荐