html5之canvas基础1

你的名字 2021-05-12 11:51 513阅读 0赞

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>

![Center][]

[Center]: /images/20210511/103f1a26119f42f686bc11d1edead37d.png