/**
* 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)
