canvas 一基础学习

/**
 * canvas
 * fillRect(L,T,W,H) 默认颜色为黑色
 * strokeRect(L,T,W,H) 带边框的黑色
 * 		默认1像素的黑色边框，显示出两像素的原因：边框从坐标中间平均分配，但是不能显示半个像素，默认会补全，所以...就显示两个像素
 *
 * 设置绘图：
 * fillStyle
 * strokeStyle
 * lineWidth
 * 边界绘制
 * lineJion:边界连接点样式
 * 			miter(默认)、round(圆角)、 bevel(斜角)
 * lineCap :端点样式
 * 			butt(默认)、round(圆角)、square(高度多出为宽一半的值)
 * 绘制路径
 * beginPath
 * closePath
 * moveTo
 * lineTo
 * stroke 划线，默认黑色
 * fill   填充，默认黑色
 * rect  矩形区域
 * clearRect 删除一个画布的矩形区域
 * save 保存路径
 * restore 回复路径
 */
var canvas = document.getElementById('canvas');
//矩形
var draw = canvas.getContext('2d');
draw.fillRect(100,100,200,200);
draw.strokeRect(100.5,100.5,200,200); 

// // 划线
draw.beginPath();
draw.moveTo(50,50);
draw.lineTo(300,300);
draw.lineTo(300,400);
draw.closePath();
draw.stroke();

//鼠标移动划线
canvas.onmousedown = function(ev){
	var ev = ev || event;
	draw.moveTo(ev.clientX - canvas.offsetLeft,ev.clientY-canvas.offsetTop);
	document.onmousemove = function(ev){
		var ev = ev || event;
		draw.lineTo(ev.clentX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
		draw.stroke();
	}
	document.onmouseup = function(){
		document.onmousemove = null;
		document.onmouseup = null;
	}
}
//方块移动
draw.fillRect(0,0,100,100);
var num = 0;
setInterval(function(){
	num++;
	draw.clearRect(0,0,canvas.width,canvas.height);
	draw.fillRect(num,num,100,100);
},100)