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绘图基础及基于粒子系统的雪花飘落的主要内容,如果未能解决你的问题,请参考以下文章

C++小项目:directx11图形程序:particleSysclass

个人网站html5雪花飘落代码JS特效下载

MATLAB | 一起来绘制有雪花飘落的圣诞树叭

MATLAB | 一起来绘制有雪花飘落的圣诞树叭

js之雪花飘落

jQuery效果—雪花飘落