文档章节

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

党程V
 党程V
发布于 2014/12/05 15:42
字数 508
阅读 1597
收藏 1

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

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

<!-- lang: js -->
/*

*@author-fanqie dc2002007@163.com */ 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={}

var liziDrawObj=new liziDrawClass(mycanvas,'left',10,1,'#f0e');
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>

<a href="javascript:;" id="J_clear_btn">清空</a> 粒子大小<input value="1" id="J_size" class="sizeInput" /> <canvas id="I_mycanvas" class="mycanvas" > 不支持…… </canvas>

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

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

© 著作权归作者所有

党程V
粉丝 5
博文 20
码字总数 9126
作品 0
西安
高级程序员
私信 提问
学习 canvas 的 globalCompositeOperation 做出的神奇效果

说明 最早知道 canvas 的 globalCompositeOperation 属性,是在需要实现一个刮刮卡效果的时候,当时也就是网上找到刮刮卡的效果赶紧完成任务就完了,这次又学习一次,希望能加深理解吧。 先来...

FEWY
2018/08/31
0
0
炫酷粒子表白,双十一脱单靠它了!

双十一光棍节又要来临了,每年这个时候都是本人最苦闷的时刻。日渐消瘦的钱包,愈发干涸的双手,虽然变强了,头却变凉了。今年一定要搞点事情! 最近听女神说想谈恋爱了,✧(≖ ◡ ≖) 嘿嘿,...

ES2049
2018/11/05
0
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
【收集】cocos2dx中加载使用plist文件

只要编辑出粒子效果,那在cocos2d-x引擎中加载plist文件就非常简单了。使用以下代码来读取粒子效果: //贴背景图片Sprite* pSprite = Sprite::create("IMG1.jpg");pSprite->setPosition(Poi...

sellgame
2014/04/03
0
0
惊艳!9个不可思议的 HTML5 Canvas 应用试验

HTML5 Video Destruction 这是一个真正抢眼的 Canvas 演示,我必须顶礼膜拜。你会看到一个可扩展的画布视频,点击视频片爆炸,但视频爆炸过程中继续播放,并能够自动回到其原来的位置。这是一...

颖辉小居
2017/10/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
12分钟前
1
0
解决Windows和Ubuntu时间不一致的问题

解决Windows和Ubuntu时间不一致的问题 问题原因是使用的时间不一致导致的。win10直接从bios读出来的时间认为就是实际时间,ubuntu认为加上8个小时 后的才是。win10用的rtc ,ubuntu用的utc 在...

shzwork
15分钟前
1
0
mysql mysql三种插入数据语句和增删改方法

点开题目是不是有点懵X,因为你只知道insert...values这一种,重来没有听说过三种,现在来介绍一下。 插入数据三种方式: insert into 表名(字段名) values(插入值); 最常用的插入语句 inse...

edison_kwok
17分钟前
2
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
28分钟前
0
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部