canvas實現的煙霧繚繞效果title>
.smoke
.smoke
canvas
style>
head>
id="main">
canvas實現的煙霧繚繞效果例項頁面h1>
id="body"
class="light">
id="content"
class="show">
展示h3>
class="smoke">
id="smokecanvas">
canvas>
div>
div>
div>
div>
// canvas煙霧繚繞效果
var canvassmoke = function (canvas, options) ;
options = options || {};
// 引數合併
var params = {};
for (var key in defaults)
// 建立儲存粒子的陣列
var particles = ;
// 渲染的粒子數目
var particlecount = params.count;
// 每個方向的最大速度
var maxvelocity = params.velocity;
// 每秒多少幀
var targetfps = params.fps;
// canvas元素
var elecanvas = canvas;
if (!elecanvas)
// 畫布的尺寸
var canvaswidth = elecanvas.clientwidth;
var canvasheight = elecanvas.clientheight;
elecanvas.width = canvaswidth;
elecanvas.height = canvasheight;
// 建立物件
var imageobj = new image();
imageobj.onload = function () );
};// 煙霧位址
imageobj.src = params.url;
// 粒子例項方法
function
particle(context)
};// 重新整理粒子
this.update = function ()
// 檢測是否到了左邊緣
else
if (this.x <= 0)
// 底邊緣
if (this.y >= canvasheight)
// 是否上邊緣
else
if (this.y <= 0)
// 越靠近邊緣，透明度越低
// 縱向透明度變化要比橫向的明顯
this.alpha = (1 - math.abs(canvaswidth * 0.5 - this.x) / canvaswidth) * (0.7 - math.abs(canvasheight *
0.5 - this.y) / canvasheight);
};// 設定粒子位置方法
this.setposition = function (x, y) ;
// 設定速度方法
this.setvelocity = function (x, y) ;
this.setimage = function (image)
}// 生成乙個min,max大小之間的隨機數
function
generaterandom(min, max)
// canvas上下文
var context;
// 初始化常見
function
init() }}
// 初始化
init();
// 繪製方法
function
draw() );
}// 重新整理
function
update() );
}// 開始繪製
if (context) , 1000 / targetfps);}};
// ie9+煙霧效果走起
if (.map)
script>
body>
html>
Unity UGUI煙霧效果
效果 如下 shader ui unlit addflowtex color tint color 1,1,1,1 materialtoggle pixelsnap pixel snap float 0 ui stencilcomp stencil comparison float 8 stenci...
flash漸變製作煙霧效果
1b 用漸變製作煙霧 1b 1b 效果 1b 這兒有幾個製作煙霧的方法，每一種技巧都基於煙霧自已的風格。你想將煙霧製作成 風格雲霧嗎？或者你想做成輕柔上飄的寫實的雲霧效果？乙個典型的捲曲角的形狀移動的煙霧又該怎樣做呢？在flash中有很多不同的方法可得到相同的結果，不管你是用as還是用動畫。flas...
flash格式化的煙霧效果製作
1b 流行的煙霧效果 流行幾乎總是被要求的動畫技巧。客戶常常要求基於現有的logo或公司標識的特別的藝術效果。這裡始終存在著挑戰，不僅只是使用藝術作品同時還使用好的動畫風格。乙個寫實的煙霧動畫看上去很好但它不一定是客戶喜歡的風格。這次我們創健乙個格式化煙霧效果，它仍然很簡單且效果不錯。1.最簡單的方...