canvas绘图基础及基于粒子系统的雪花飘落
Posted 沙中世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas绘图基础及基于粒子系统的雪花飘落相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <script> //全局变量 var canvas = document.createElement(‘canvas‘); var canvasContext = canvas.getContext(‘2d‘); var canvasWidth = window.innerWidth; var canvasHeight = window.innerHeight; init(); function init(){ document.body.appendChild(canvas); canvas.width = canvasWidth; canvas.height = canvasHeight; canvas.setAttribute(‘style‘,‘background:black;border:5px solid red‘);//设置边框 } /**绘制矩形快 * in_fileStyle 颜色; * in_x,in_y 左上角坐标 * in_width,in_height 宽度和高度 */ function drawRect(in_fileStyle,in_x,in_y,in_width,in_height){ canvasContext.fillStyle=in_fileStyle; canvasContext.fillRect(in_x,in_y,in_width,in_height); } /**绘制线条 * in_fileStyle 颜色; * in_x1,in_y1 起点坐标; * in_x2,in_y2 终点坐标; * in_size 线条宽度 */ function drawLine(in_fileStyle,in_x1,in_y1,in_x2,in_y2,in_size){ canvasContext.beginPath();//重置当前路径 或 开始一条路径 canvasContext.strokeStyle=in_fileStyle; canvasContext.lineWidth=in_size; canvasContext.moveTo(in_x1,in_y1); canvasContext.lineTo(in_x2,in_y2); canvasContext.stroke();//绘制 } /**绘制圆圈或实心圆 * in_fileStyle 颜色; * in_x,in_y 圆心坐标 * in_r 半径 * in_startAngle,in_endAngle 起始角度，结束角度 * in_size 宽度 */ function drawCircle(in_fileStyle,in_x,in_y,in_r,in_startAngle,in_endAngle,in_size){ canvasContext.beginPath(); canvasContext.strokeStyle=in_fileStyle; canvasContext.lineWidth=in_size; canvasContext.arc(in_x,in_y,in_r,in_startAngle,in_endAngle); canvasContext.stroke();//绘制 } /**绘制文字 * in_fileStyle 颜色; * in_x,in_y 左下角坐标 * in_size 大小 * in_fontType 字体 * in_isSolid 是否填充 true or false * in_text 内容 * in_lineSize 线条宽度 **/ function drawText(in_fileStyle,in_x,in_y,in_size,in_fontType,in_isSolid,in_text,in_lineSize){ canvasContext.strokeStyle=in_fileStyle; canvasContext.fillStyle=in_fileStyle; canvasContext.font=in_size + "px " + in_fontType; if(in_isSolid==true){ canvasContext.fillText(in_text,in_x,in_y); }else{ canvasContext.lineWidth=in_lineSize; canvasContext.strokeText(in_text,in_x,in_y); } } /** * 绘制图像,目前此函数是异步绘制，对图层次序不能控制 */ function drawImge(in_url,in_x,in_y,in_width,in_height){ var stop = false; var img=new Image(); img.src=in_url; img.onload = function(){ canvasContext.drawImage(img,in_x,in_y,in_width,in_height); }; } /*drawRect("rgba(255,0,0,1)",30,30,720,700); drawLine("#FF0000",10,10,720,400,13); drawCircle("#00F0F0",300,300,50,0,2*Math.PI,100); drawText("#00F0F0",400,500,100,"Arial",false,"HELLO",4); drawImge("imges/snow.png",0,0,200,200);*/ //随机产生雪花 var snows=[]; //雪花数组 function productSnow(){ // clear the canvas canvasContext.fillStyle = "rgba(0,0,0,1)"; canvasContext.fillRect(0,0, canvasWidth, canvasHeight); var snow = new oneSnow(Math.random()*canvasWidth, Math.random()*canvasHeight*0.3,100); snows.push(snow); if(snows.length > 100){ //只保留二十个雪花 snows.shift(); //删除第一个雪花 } //绘制数组中的每一个雪花 for(var i=0;i<snows.length;i++){ snows[i].showSnow().moveToDown(); } } //定义一个雪花 function oneSnow(positionX,positionY,snowSize){ this.x=positionX; this.y=positionY; this.size=snowSize; //向下运动 y坐标大 this.moveToDown=function(){this.y=this.y+5} //显示 this.showSnow = function(){ drawImge("imges/snow.png",this.x, this.y,this.size,this.size); //drawCircle("#00F0F0",this.x,this.y,10,0,2*Math.PI,20); return this; } } setInterval(productSnow,1000/150);//每个1/3秒调用一次productSnow函数 </script> </body> </html>
以上是关于canvas绘图基础及基于粒子系统的雪花飘落的主要内容，如果未能解决你的问题，请参考以下文章