【Golang语言社区--H5编程】smoke.js
时间:2022-05-06
本文章向大家介绍【Golang语言社区--H5编程】smoke.js,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
源码如下
var smokemachine = function (context, color){
color = color || [24, 46.8, 48.2]
var polyfillAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var lastframe;
var currentparticles = []
var pendingparticles = []
var smokeimage = new Image();
smokeimage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8/L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N+QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE+CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9/NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A/hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V/pHDBYY1hrFGNuayJsym740u2C+02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT//ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs+ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK/cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta+x/+5Em0mzJ/+dGj/t8AyNmf2zvs9JmHt6vvmCpYtEFrcu+bYsc/m9lSGrTq9xWbtvveWGbZtMNm/ZarJt+w6rnft3u+45uy9s/4ODOYd+Hmk/Jn58xUnrU+fOJJ/9dX7SRe1LR68kXv13fc5Nm1t379TfU75/4mHeY7En+59lvhB5efB1/lv5dxc+NH0y/fzq64Lv4T8Ffp360/rP8f9/AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAF/SURBVHjafNNdTxNBFMbx385ut2mhpS1gjRA1JBjjhaJX+hH44n4AvRCvFG1E6kuAUtza7Y4XfVGIem4mmfnPOXPO84zoH5FcX7Mbx6mAYIYZVnmyxa2Irqa2NZmhsUJpoqZUikswIrGr56dLdzRdGJtIXZj5KhGz1Use6UrVNe2bCV4Kxkrn1lWuwgJ8oC7R1PfQFdoOrOkq0VBblq5LBbfk1m3acaI0dGmqb+BUtOixKdoQNWxqykWvjKQqU4lcMgcrXYWo0tLR0nAgc+jQlg0dvd+lz2wbe6ISFT4KHjuya0suVTqxGu+ljh96Cl2Jlp4DiSATjKXzjJVz9wRMbTs18k5L8EWu9N66b2JYKXRuhO8ypbYX9owUioU6VRLnqt91X66vsGfgGY7kBl47niu3BDtqRvY9d9vEsb7Phk68vW4KziR27BnqqEl88kFh8Ifr4tJwiSj3VK4u9caFs2v2XIHzaGsIpgoT0/+Bc0FnouKGpf/yFTJBuLn5awAGz32g+KVMGQAAAABJRU5ErkJggg=="
var buffer = document.createElement('canvas'),
bctx = buffer.getContext('2d')
buffer.width = 20
buffer.height = 20
bctx.drawImage(smokeimage,0,0,20,20)
var data = bctx.getImageData(0,0,20,20)
var d = data.data
for(var i=0;i<d.length;i+=4){
d[i]=color[0]
d[i+1]=color[1]
d[i+2]=color[2]
}
bctx.putImageData(data,0,0)
smokeimage.src = buffer.toDataURL('img/png')
var imagewidth = smokeimage.width*5
var imageheight = smokeimage.height*5
function particle(x,y,l){
this.x = x
this.y = y
this.age = 0
this.vx = (Math.random()*8-4)/100
this.startvy = -(Math.random()*30+10)/100
this.vy = this.startvy
this.scale = Math.random()*.5
this.lifetime = Math.random()*l+l/2
this.finalscale = 5+this.scale+Math.random()
this.update = function(deltatime){
this.x+=this.vx*deltatime
this.y+=this.vy*deltatime
var frac = Math.pow((this.age)/this.lifetime,.5)
this.vy = (1-frac)*this.startvy
this.age+=deltatime
this.scale=frac*this.finalscale
}
this.draw = function(){
context.globalAlpha = (1-Math.abs(1-2*(this.age)/this.lifetime))/8
var off = this.scale*imagewidth/2
var xmin = this.x-off
var xmax = xmin+this.scale*imageheight
var ymin = this.y-off
var ymax = ymin+this.scale*imageheight
context.drawImage(smokeimage, xmin, ymin, xmax-xmin, ymax-ymin);
}
}
function addparticles(x,y,n,lifetime){
lifetime = lifetime || 4000
n = n || 10
if(n < 1) return Math.random() <= n && pendingparticles.push(new particle(x,y,lifetime));
for (var i = 0; i < n; i++) {
pendingparticles.push(new particle(x,y,lifetime))
};
}
function updateanddrawparticles(deltatime){
bctx.clearRect(0, 0, buffer.width, buffer.height);
deltatime = deltatime || 16
var newparticles = []
currentparticles = currentparticles.concat(pendingparticles)
pendingparticles = []
currentparticles.forEach(function(p){
p.update(deltatime)
if (p.age<p.lifetime){
p.draw()
newparticles.push(p)
}
})
currentparticles = newparticles
}
function frame(time){
if(running){
var deltat = time-lastframe
lastframe = time;
updateanddrawparticles(deltat)
polyfillAnimFrame(frame)
}
}
var running = false
function start(){
running = true
polyfillAnimFrame(function(time){
lastframe = time
polyfillAnimFrame(frame)
})
}
function stop(){
running = false
}
return {
start:start,
stop:stop,
step: updateanddrawparticles,
addsmoke: addparticles
}
}
- 初探JavaScript(四)——作用域链和声明提前
- 开发人员看测试之运行Github中的JBehave项目
- 如何高效地合并Spark社区PR到自己维护的分支
- 开发人员看测试之TDD和BDD
- AngularJS入门心得1——directive和controller如何通信
- AngularJS入门心得2——何为双向数据绑定
- AngularJS入门心得3——HTML的左右手指令
- AngularJS入门心得4——漫谈指令scope
- Enterprise Library深入解析与灵活应用(8):WCF与Exception Handling AppBlock集成[上]
- 苹果就“电池门”公开致歉;微信下拉任务栏新增小游戏;美团打车进入北京
- 新华三《中国城市数字经济指数白皮书》:深圳数字经济发展水平国内居首
- NodeMCU模块写入MicroPython固件
- 如何证明Application Domain的隔离性
- Enterprise Library深入解析与灵活应用(8):WCF与Exception Handling AppBlock集成[下]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【go】剑指offer:求一个数的整数次方
- 《编程珠玑》字符串包含
- redis基本数据类型(集合、HyperLogLog、地理位置)
- 【go】剑指offer:不同程序员遇到相同的题
- Spring全家桶之SpringSecurity
- Go实现字符串全排列字典序排列详解
- Go实现字符串全排列详解递归
- springboot整合RSA进行sign签名校验
- Go寻找最长回文字符串——中心扩展法
- Spring高级技术应用——百战商城实现(上)
- 基于Springboot+jpa+thymeleaf+rabbit+SpringBoot mail 的简单项目
- 【go】剑指offer: 删除链表结点O(1)时间复杂度
- Go快速查找有序二维数组的数字
- Go寻找数组中最小的k个数——全部排序和部分排序
- Spring高级技术应用——百战商城实现(下)