html5 canvas 学习笔记

var cvs = document.getElementById("2d");
var ctx = cvs.getContext("2d");

关于画弧

arc函数的使用，其将弧的起始点（区别圆心）作为绘制的起始位置，弧的结束点作为绘制的结束位置，

然后在起始点和结束点添加直线，把直线和弧封闭的范围作为实际的绘制区域

//这里的参数为：圆心（x, y）、半径radius、 起始弧度、结束弧度、逆时针?true:false
ctx.arc(100, 100, 15, 0, Math.PI * 2, false);

//坐标进行移动，移动以后将以新的坐标作为原点执行以后的操作
ctx.translate(400, 400);

//实现关于x轴的反射
ctx.setTransform(1, 0, 0, -1, 0, 0);

(function(){
	var a = document.getElementById("a");
	var ctx = a.getContext("2d");
	
	ctx.fillStyle = "rgba(100, 120, 150, 0.4)";//fillStyle
	ctx.lineWidth = 1;
	
	//draw horizontal middle line(x axis)
	//save current view
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(0, 200);
	ctx.lineTo(400, 200);
	ctx.closePath();
	ctx.stroke();
	
	//draw y axis
	ctx.beginPath();
	ctx.moveTo(200, 0);
	ctx.lineTo(200, 400);
	ctx.closePath();
	ctx.stroke();
	//reset 
	ctx.restore();
	
	//traslate to new location and draw a circle
	ctx.save();
	ctx.translate(200, 200);
	ctx.strokeStyle = "green";//strokeStyle
	ctx.beginPath();
	ctx.arc(0, 0, 50, 0, Math.PI * 2, false);
	ctx.closePath();
	ctx.stroke();
	
	//draw a rectangle
	//the parameters are x, y, width, height
	ctx.strokeStyle = "blue";
	ctx.strokeRect(0, 0, 100, 100);
	ctx.restore();
	
	
	//to show the reflect transform
	//draw a new line
	ctx.strokeStyle = "yellow";
	ctx.font = "20px Georgia";
	ctx.save();
	
	ctx.translate(200, 200);
	ctx.beginPath();
	ctx.moveTo(0, 150);
	ctx.lineTo(200, 150);
	ctx.closePath();
	ctx.stroke();
	ctx.fillText("A", 180, 160);
	ctx.restore();
	
	//new line reflect with x axis
	ctx.save();
	ctx.translate(200, 200);
	ctx.transform(1, 0, 0, -1, 0, 0);
	//ctx.setTransform(1, 0, 0, -1, 0, 0);//?
	ctx.beginPath();
	ctx.moveTo(0, 150);
	ctx.lineTo(200, 150);
	ctx.closePath();
	ctx.stroke();
	ctx.transform(1, 0, 0, -1, 0, 0);//reflect again to the quondam location
	ctx.fillText("A reflect", 100, -160);
	ctx.restore();
	
	//draw an arc
	ctx.save();
	ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
	//arc area
	ctx.beginPath();
	ctx.arc(100, 100, 90, 0, Math.PI / 2, false);
	ctx.closePath();
	ctx.fill();
	
	//1/4 circle
	ctx.strokeStyle = "green";
	ctx.beginPath();
	ctx.moveTo(100, 100);//(100, 100) as the begin point
	ctx.arc(100, 100, 90, 0, Math.PI / 2, false);
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
	
})();

//canvas 元素同其他元素相同，其背景本身也是透明的，这样通过canvas的叠加，就可以实现类似玻璃的效果等，在动画中有丰富的应用，

//而无需麻烦的去清除原有的数据

有关仿射变换，参考：http://blog.sina.com.cn/s/blog_a48dd881010196dq.html

有关路径和贝塞尔曲线，参考：http://blog.sina.com.cn/s/blog_a48dd8810101960j.html