資訊專欄INFORMATION COLUMN
摘要：改變雪花的坐標(biāo)，在短時間內(nèi)重繪一次，然后不斷重復(fù)此過程，為了照顧瀏覽器爸爸的感受，超出畫布邊界的時候把雪花清除掉。
canvas大雪紛飛
前言：正好業(yè)務(wù)觸及到canvas，看完api順手寫個雪花效果，因?yàn)橹翱吹竭^很多次這個，主要看思路，想象力好的可以慢慢去創(chuàng)作屬于自己的canvas效果
思路：
利用畫圓arc()和環(huán)形漸變色createRadialGradient()畫一個雪花的模型（想要更好看的模型可以用圖片代替）
var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
grd.addColorStop(0, "rgba(255,255,255,1)");
grd.addColorStop(1, "rgba(255,255,255,0.2)");
this.canvas.fillStyle = grd;
this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
this.canvas.fill();
效果圖
如何讓canvas畫布上的點(diǎn)移動
動畫其實(shí)就是一幀一幀的畫面的組合，在一定時間內(nèi)把畫面從第一幀切換到第二幀到第n幀這個過程就是動畫
弄懂這個道理，讓雪花動起來就很簡單了，重繪。
改變雪花的x,y坐標(biāo)，在短時間內(nèi)重繪一次，然后不斷重復(fù)此過程，為了照顧瀏覽器爸爸的感受，x,y超出畫布邊界的時候把雪花清除掉。
setInterval(() => {
arr[0].canvas.clearRect(0, 0, maxW, maxH);
for(var i = 0; i < arr.length; i++) {
if(arr[i].y >= maxH){
//清除超出下邊界的雪花
continue;
}
arr[i].play();
}
}, 30);
play: function() {
this.x += this.speedX;
this.y += this.speedY;
if(this.x < this.r) {
this.speedX = Math.abs(this.speedX);
}
if(this.y < this.r) {
this.speedY = Math.abs(this.speedY);
}
this.canvas.beginPath();
var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
grd.addColorStop(0, "rgba(255,255,255,1)");
grd.addColorStop(1, "rgba(255,255,255,0.2)");
this.canvas.fillStyle = grd;
this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
this.canvas.fill();
}
最后一步就是創(chuàng)建一個個雪花實(shí)例去執(zhí)行動畫了
var snow = function() {
this.x = this.rand(maxW);
this.y = 0;
this.r = this.rand(10);
this.speedX = this.getRanNum(-5, 5);
this.speedY = this.getRanNum(10, 20);
this.width = 0;
this.height = 0;
this.canvas = {};
this.init();
}
var arr = [];
setInterval(() => {
for(let i = 0; i < 10; i++) {
arr.push(new snow());
}
}, 30);
效果預(yù)覽
完整代碼
最后，每幾個canvas的方法組合一下做個小效果，慢慢的就可以做大型炫酷效果了，當(dāng)然，炫酷效果離不開一些常用或生僻的數(shù)學(xué)知識，各類算法，方法，相關(guān)插件（我說的插件是用來計算一些東西或者圖形之類的，不是用插件畫canvas）作為鋪墊
敲黑板，希望路過的大神能介紹一些canvas進(jìn)階需要學(xué)習(xí)的一些知識點(diǎn)，小弟不勝感激~
版權(quán)所有，轉(zhuǎn)載請注明出處~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90097.html
摘要：現(xiàn)在發(fā)出來的版本，我重新使用了語言實(shí)現(xiàn)。其實(shí)我之前介紹的老師課程也大量參考和使用算法這本書上的思路和例題?？催@本書主要是讓我覺得算法可以以比較輕松的方式入門。劍指這本書主要用于準(zhǔn)備算法面試，在網(wǎng)絡(luò)上備受好評。 我是一個半路出家的程序員，在我剛開始從事編碼工作的頭幾年，我沒有接觸過算法和數(shù)據(jù)結(jié)構(gòu)，覺得它們是只會在我找工作的時候用得到的知識。盡管有很多人跟我說過算法和數(shù)據(jù)結(jié)構(gòu)無比重要，我也...
摘要：隨著微信和的不斷普及，現(xiàn)在微信和留言也已經(jīng)成為了甩鍋?zhàn)C據(jù)的一部分，經(jīng)常郵件里面大量粘貼微信聊天截圖，職場上的宮心斗不比電視劇里面的差。 對有些職場人來講，甩鍋就是一種生存手段。 01.從大學(xué)打籃球說起 上大學(xué)的時候喜歡打籃球，然后我又特別喜歡搶籃板，經(jīng)常是跳起來的時候沒...
摘要：導(dǎo)語本期訪談對象劉睿民，柏睿數(shù)據(jù)科技。由于計程車司機(jī)接二連三游行抗議，法國政府已頒布法令禁用。技術(shù)人攻略為什么會從數(shù)據(jù)挖掘，轉(zhuǎn)向數(shù)據(jù)庫引擎研發(fā)后來發(fā)現(xiàn)，所謂的數(shù)據(jù)挖掘在中國，很容易走偏。 showImg(https://segmentfault.com/img/bVkGay); 文：Gracia (本文為原創(chuàng)內(nèi)容，部分或全文轉(zhuǎn)載均需經(jīng)過作者授權(quán)，并保留完整的作者信息和技術(shù)人攻略介紹。...
閱讀 3530·2019-08-30 15:55
閱讀 2112·2019-08-30 15:44
閱讀 1567·2019-08-30 12:47
閱讀 799·2019-08-30 11:05
閱讀 1676·2019-08-30 10:54
閱讀 708·2019-08-29 16:07
閱讀 3639·2019-08-29 14:17
閱讀 2294·2019-08-23 18:31
