html真实雾效果图,HTML5Canvas逼真烟雾效果js插件

简要教程

smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件。通过该js插件，可以非常轻松的在页面中制作出各种烟雾效果。

使用方法

在页面中引入smoke.js文件。

HTML结构

使用一个元素作为容器。

初始化插件

在页面底部使用下面的方法来初始化该烟雾特效插件。var canvas = document.getElementById('canvas')

var ctx = canvas.getContext('2d')

canvas.width = 1000

canvas.height = 1000

var party = smokemachine(ctx, [54, 16.8, 18.2])

party.start() // start animating

party.addsmoke(500,500,10) // wow we made smoke

setTimeout(function(){

party.stop() // stop animating

party.addsmoke(600,500,100)

party.addsmoke(500,600,20)

for(var i=0;i<10;i++){

party.step(10) // pretend 10 ms pass and rerender

}

setTimeout(function(){

party.start()

},1000)

},1000)

API

该烟雾特效插件可用的API有：smokemachine(context, [r,g,b])：返回一个烟雾实例。

context —— 绘制烟雾的画布。

[r,g,b] —— (可选)烟雾的颜色var party = smokemachine(context, [1,5,253])party.start()：开始烟雾动画。

party.stop()：结束烟雾动画。

party.addsmoke(x,y,numberofparticles)：

x,y — 在canvas中创建的烟雾的坐标。

numberofparticles — 创建更多的烟雾。

party.step(milliseconds)：在多少毫秒之后重新绘制烟雾。

以上就是HTML5 Canvas逼真烟雾效果js插件的内容，更多相关内容请关注PHP中文网(www.gxlcms.com)！

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网