/** * 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)
时间: 2024-10-11 22:06:26