html5之canvas基础1

来源：互联网发布：织梦cms拿站编辑：程序博客网时间：2024/06/06 02:54

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>

0 0