HTML5 Canvas

hmtl5的canvas的使用确实要方便的多,只需掌握起基本的绘画语法就可以随心所欲的进行创作了,与js的结合则更加的完美。学习了一下canvas的基本语法,绘制了一个时钟同时使用javascript的定时器将其与本地时间保持同步。
canvas基本语法:
1、getContext(“2d”);//配置绘制环境,即2d绘制
2、clearRect(x,y,width,height);//清除画布,x为画布水平坐标,y为画布垂直坐标,width与height制定画布的范围
3、moveTo(x,y)绘图起点
4、lineTo(x,y)绘图终点
5、stroke()描边
6、fill()填充
7、fillStyle区块填充颜色
8、strokeStyle边框填充颜色
9、lineWidth设置边框宽度
10、arc(水平坐标,垂直坐标,半径,弧度起点,弧度终点,false/true);//false为顺时针绘画,true为逆时针绘画
注释:arc需要重点看一下,因为里面涉及到弧度与度数之间的转换1°=2π/360
11、beginPath()与closePath()封闭绘画区域

css style代码

body{background:black;}
#c1{background:white;}

HTML代码

<canvas id="c1" width="400" height="400"></canvas>

注释:canvas直接在行内定义width、height与在style里定义是有区别的,canvas画布默认值width为300px,height为150px,如果在style里面定义canvas的width、height则是对画布里元素进行比例缩放,有点scale的味道!具体缩放的比例则看定义的值与默认值的比例关系。
javascript代码

var oC = document.getElementById("c1");
	var oGc = oC.getContext("2d");//配置绘制环境,即2d绘制
	function toDraw(){
		var x = 200;
		var y = 200;
		var r = 150;
		oGc.clearRect(0,0,oC.width,oC.height);
		//获取时间
		var oDate = new Date();
		var oHours = oDate.getHours();
		var oMin = oDate.getMinutes();
		var oSen = oDate.getSeconds();
		//时针值
		var oHoursValue = (-90 + oHours * 30 + oMin/2)*Math.PI/180;
		var oMinValue = (-90 + oMin * 6 + oSen/10)*Math.PI/180;
		var oSecValue = (-90 + oSen * 6)*Math.PI/180;
		//秒针分区
		oGc.beginPath();
		for(var i = 0;i<60;i++){
			oGc.moveTo(x,y);
			oGc.arc(x,y,r,6*i*Math.PI/180,6*(i + 1)*Math.PI/180,false);//弧度计算
		}
		oGc.closePath();
		oGc.stroke();
		//秒针遮罩
		oGc.fillStyle = "white";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();
		
		//分针分区s
		oGc.lineWidth = "2";
		oGc.beginPath();
		for(var i = 0;i<12;i++){
			oGc.moveTo(x,y);
			oGc.arc(x,y,r,30*i*Math.PI/180,30*(i + 1)*Math.PI/180,false);//弧度计算
		}
		oGc.closePath();
		oGc.stroke();	
		//分针遮罩
		oGc.fillStyle = "white";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*19/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();
		
		//时针指针
		oGc.lineWidth = "5";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
		oGc.closePath();
		oGc.stroke();
		//分针指针
		oGc.lineWidth = "3";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*14/20,oMinValue,oMinValue,false);
		oGc.closePath();
		oGc.stroke();
		//秒针指针
		oGc.lineWidth = "1";
		oGc.beginPath();
		oGc.moveTo(x,y);
		oGc.arc(x,y,r*18/20,oSecValue,oSecValue,false);
		oGc.closePath();
		oGc.stroke();
		//中心圆轴
		oGc.fillStyle = "black";
		oGc.beginPath();
			oGc.moveTo(x,y);
			oGc.arc(x,y,r*0.8/20,0,360*Math.PI/180,false);
		oGc.closePath();
		oGc.fill();	
	}
	toDraw();
	setInterval(function(){
		toDraw();
	},1000);

效果