canvas绘图粒子扩散效果【原创】

第一次写canvas相关的脚本,点击页面可以产生新的扩散点,并整体颜色变换,可以根据输入数字变换粒子大小,

预览地址:http://runjs.cn/code/58mct5yo

/*

@author-fanqie [email protected]
/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };

})();
var openBtn=document.getElementById(‘J_open_btn‘);
var clearBtn=document.getElementById(‘J_clear_btn‘);
var runState=true;
//打开关闭
openBtn.addEventListener(“click”,function(e){

thisBtn=e.target;
if(runState==false){
    runState=true;
    thisBtn.innerHTML="停止";
}else{
    runState=false;
    thisBtn.innerHTML="继续";
}

});
//J_clear_btn
clearBtn.addEventListener(“click”,function(e){
liziDrawObj.destory();
runState=true;
thisBtn.innerHTML=“停止”;
});
var mycanvas=document.getElementById(‘I_mycanvas‘);
mycanvas.height=window.innerHeight;
mycanvas.width=window.innerWidth;
var colors=[‘#00FF00‘,‘#FFFF00‘,‘#FF0000‘,‘#00CCFF‘];
var liziDrawClass=function(canvasObj,direction,directionVal,size,color){

this.canvasObj=canvasObj.getContext("2d");
this.direction=direction;//left top bottom right
this.directionVal=directionVal;//偏移量
this.size=size;
this.color=color;
this.liziItem=Array();//粒子对象集合

}
liziDrawClass.prototype={

//初始化
init:function(){
    liziDrawObj.factory(250,200);
    this.canvasObj.shadowColor=this.color;
    this.canvasObj.fillStyle=this.color;
    this.canvasObj.globalAlpha=this.size;
    this.canvasObj.shadowBlur=5;
    this.canvasObj.save();
},
//渲染画布
drawDraw:function(lizi){
    this.canvasObj.beginPath();

    this.canvasObj.arc(lizi.positionX,lizi.positionY,this.size,0,2*Math.PI);
    this.canvasObj.fill();
    this.canvasObj.closePath();
    this.canvasObj.restore();
},
//更新画布
update:function(){
        for(index in liziDrawObj.liziItem){

            liziDrawObj.liziItem[index]=liziDrawObj.createNew(liziDrawObj.liziItem[index],5);
            var liziList= liziDrawObj.liziItem[index];
            for(current in liziList){
                lizi=liziList[current];

                //liziDrawObj.canvasObj.clearRect(0,0,window.innerWidth,window.innerHeight);
                liziDrawObj.drawDraw(lizi);
            }
        }
},//同时创建多个新粒子 为了加快粒子产生速度
createNew:function(liziList,count){
    lastLizi=liziList.pop();
    liziList=Array();
    liziList.push(lastLizi);
    for (var i = 0; i <count; i++) {
        lastLizi=liziList[liziList.length-1];

        var liziNew=new liziClass(lastLizi.size,
            lastLizi.color,
            lastLizi.direction,
            lastLizi.positionX,
            lastLizi.positionY,
            lastLizi.directionVal);
            liziNew.centerX=lastLizi.centerX;
            liziNew.centerY=lastLizi.centerY;
            liziNew.angle=lastLizi.angle+0.15;
            liziNew.directionVal=lastLizi.directionVal+0.05;
            cx= liziNew.centerX+Math.sin(liziNew.angle) * liziNew.directionVal;
            cy= liziNew.centerY+Math.cos(liziNew.angle) * liziNew.directionVal;
            liziNew.positionX=cx+Math.random();
            liziNew.positionY=cy+Math.random()*5;
            liziList.push(liziNew);
    };

    return liziList;
},
//生产粒子model
factory:function(positionX,positionY){
    var lizi=new liziClass(this.size, this.color,this.direction,positionX,positionY,this.directionVal);
    this.liziItem.push([lizi]);
   this.color=colors[parseInt(Math.random()*4,10)];
    this.canvasObj.shadowColor=this.color;
    this.canvasObj.fillStyle=this.color;
    this.canvasObj.save();
},destory:function(){
    this.canvasObj.clearRect(0,0,window.innerWidth,window.innerHeight);
    this.liziItem=new Array();
}

}
var liziClass=function(size,color,movement,positionX,positionY,directionVal){

this.size=size;
    this.color=color;
    this.movement=movement;
    this.positionX=positionX;
    this.positionY=positionY;
    this.centerX=Number(positionX)-directionVal;
    this.centerY=Number(positionY)-directionVal;
    this.angle=0;
    this.directionVal=directionVal;//偏移量
}

liziClass.prototype={}

liziDrawObj.init();

function loop(){
    if(runState){
        liziDrawObj.size=document.getElementById(‘J_size‘).value;
        liziDrawObj.update();
    }
    requestAnimFrame(loop);

}
mycanvas.addEventListener("click",newPosition);
function newPosition(e){
    if(runState){
        liziDrawObj.factory(e.x,e.y);
    }
}
loop();
<!-- lang: html -->
   <a href="javascript:;" id="J_open_btn">停止</a>

清空

<canvas id="I_mycanvas" class="mycanvas" >
     不支持……
 </canvas>

<!-- lang: css -->
.mycanvas{background: #000}
body{background: #eee}

.sizeInput{width: 2em;font-size:15px; }     

时间: 2024-10-28 21:02:41

canvas绘图粒子扩散效果【原创】的相关文章

用HTML5 Canvas 做擦除及扩散效果

2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内实现了一个方案[下文方案一],后来继续探索之后进一步更新了这个方案[下文方案二],提高了交互的性能,也提升了用户体验.今年初的另一个项目,提出了一个比较类似的需求,不过不是擦除效果,需要在一张地图上动态显示雾霾驱散的效果,这个交互需求有个小难点,雾霾的边缘是模糊的,而不是常见的那种整齐的. 这里说明

Android中Canvas绘图基础详解(附源码下载)

Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API.Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形.Canvas绘图有三个基本要素:Canvas.绘图坐标系以及Paint.Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入要绘制的图形的坐标形状,还要传入一个画笔Paint.drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状

引言:Canvas绘图API快速入门

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的?本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器:Canvas绘制API. 一.Canvas是什么? Canvas就是一个画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步.另外Canvas不仅仅提供简单的

伙伴们休息啦canvas绘图夜空小屋

HTML5 canvas绘图夜空小屋 伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: 1 <!doctype html> 2 <html> 3 <head><meta name="viewport" content="width=device-width, initial-scale=1" /> 4 <t

Android中Canvas绘图之Shader使用图文详解

概述 我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什么呢?做过GPU绘图的同学应该都知道这个词汇,Shader就是着色器的意思.我们可以这样理解,Canvas中的各种drawXXX方法定义了图形的形状,画笔中的Shader则定义了图形的着色.外观,二者结合到一起就决定了最终Canvas绘制的被色彩填充的图形的样子. 类android.graphics

Android中Canvas绘图之PorterDuffXfermode使用及工作原理详解

概述 类android.graphics.PorterDuffXfermode继承自android.graphics.Xfermode.在用Android中的Canvas进行绘图时,可以通过使用PorterDuffXfermode将所绘制的图形的像素与Canvas中对应位置的像素按照一定规则进行混合,形成新的像素值,从而更新Canvas中最终的像素颜色值,这样会创建很多有趣的效果.当使用PorterDuffXfermode时,需要将将其作为参数传给Paint.setXfermode(Xfermo

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

HTML5 学习总结(四)--canvas绘图.WebGL.SVG 目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML5游戏开发 2.2.1.Cocos2D-HTML5 2.2.2.Egret(白鹭引擎) 三.SVG 3.1.SVG Hello Wrold 3.2.多种引入SVG的方法 3.3.画直线 3.4.画椭圆 3.5.文本与矩形 3.6.向

html5 canvas绘图-刻度仪表盘的绘制

---恢复内容开始--- 圆弧,尤其是圆,通常被用做描绘一些实物.下图所示的应用程序用5个圆形实现了一个仪表盘.仪表盘的刻度代表了圆周上的角度值.用户可以通过它来交互式地旋转多边形物体. 该应用程序使用了本章到目前为止所讲的很多技术.为了绘制这个仪表盘,该应用程序画了许多圆形与线段,使用了各种颜色及透明度,对圆形路径进行了描边与填充.同时为了使盘面上的刻度看起来有深度感,它还运用了阴影效果.该程序还运用了剪纸效果.使得仪表盘外围的那一圈看起来有半透明的效果. 仪表盘的绘制 html代码: 1 <

canvas特效:下雨效果

canvas做出美爆了了下雨效果,本效果原创 雨点大小可自己调节,页面代码如下: <body> <canvas id="canvas" width="2000px" height="1200px"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getC