设置canvas的宽高：canvas标签默认的宽高是300*150，是一个内联块元素。可以在canvas标签上设置宽高，在js中为DOM对象设置：mycanvas.width=500mycanvas.height=500注意：不要通过css调整canvas的宽高，这样会导致内部画布被拉伸，图形变形。获取画笔工具：画布绘制是通过canvas标签的画笔完成的varctx=canvas.getContext('2d')注意，不要写成getContent，传入的参数目前只有2d。填充后才能看到真实的图形。如果绘制完成后绘制的图形路径没有闭合，继续绘制路径时会首尾相接。如果填充时路径仍然没有闭合，则路径的闭合区域将填充ctx.fill()//填充ctx.stroke()//Stroke可以调整ctx.strokeStyle,ctx.fillStyle属性来改变fill,strokecolor,值为绘制矩形ctx的颜色值(rgb,rgba,word,hexadecimal)。rect(x,y,w,h)canvas坐标系起点为左上角，x轴向右为正，y轴为正向下。即可以使用strokeRect和fillRect方法直接绘制一个带宽度和高度的填充和描边矩形，以清除矩形区域和动画原理。ctx.clearRect(x,y,w,h)可以清除某个矩形区域的图形画布，实现动画原理。不断的绘制和擦除实现varctx=canvas.getContext("2d")letx=0,y=0;ctx.fillRect(x,y,50,50)setInterval(function(){//drawnew擦除之前的ctx.clearRect(0,0,canvas.width,canvas.height)x++;y++;//不断绘制new图形ctx.fillRect(x,y,50,50)},30)
