画布点线动画案例

画布点线动画案例画圆：arc(x,y,r,start,stop)画线：moveTo(x,y)定义线起始坐标lineTo(x,y)定义线坐标填充：fill()绘制：stroke()1.绘制点初始化浏览器不支持canvas！找到元素letcanvas=document.getElementById("canvas");创建一个上下文对象letctx=canvas.getContext("2d");画圆//坐标(x,y),半径,起始角,结束角,顺时针(逆时针)ctx.arc(70,80,30,0,Math.PI*2,false);2.画很多点//生成点for(leti=0;ithis.canvas.width){this.init(this.canvas);}if(this.y<0||this.y>this.canvas.height){this.init(this.canvas);}this.ctx.beginPath();this.ctx.arc(this.x,this.y,this.r,0,2*Math.PI);this.ctx.fillStyle="rgba(0,0,0,.6)";这个.ctx.fill();this.ctx.closePath();}动画和连接兼容性requestAnimationFrameletrequestAnimFrame=requestAnimationFrame||webkitRequestAnimationFrame||oRequestAnimationFrame||msRequestAnimationFrame；requestAnimFrame(animateUpdate);//兼容不同的浏览器requestAnimationFrame或者或者使用setTimeout实现向后兼容：//requestAnimationFrame的向后兼容处理if(!window.requestAnimationFrame){window.requestAnimationFrame=function(fn){setTimeout(fn,17);};}由于点的位置是不断变化的，所以动画中需要进行画线的操作，更新一次点的位置，进行一次连接函数animateUpdate(){ctx.clearRect(0,0,canvas.width,canvas.height);//清除画布中的原始内容for(leti=0;i如果不设置width和height属性，默认宽300，高150，单位px。也可以使用css属性来设置宽高，但是如果宽高属性与初始比例不一致，就会失真。因此，建议永远不要使用css属性来设置的宽度和高度。2.不要试图通过关闭现有路径来开始新路径。在绘制一个新元素之前，记住beginPath()无论你用moveTo将画笔移动到哪里，只要你不调用beginPath()，你将始终绘制一个路径fillRect和strokeRect。不打断当前路径直接绘制独立区域的函数