(給前端大全加星標(biāo)，提升前端技能)

作者：薄荷前端

https://github.com/BooheeFE/weekly/issues/26

canvas 用于在網(wǎng)頁上繪制圖像、動(dòng)畫，可以將其理解為畫布，在這個(gè)畫布上構(gòu)建想要的效果。

canvas 可以繪制動(dòng)態(tài)效果，除了常用的規(guī)則動(dòng)畫之外，還可以采用粒子的概念來實(shí)現(xiàn)較復(fù)雜的動(dòng)效，本文分別采用普通動(dòng)效與粒子特效實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的時(shí)鐘。

普通時(shí)鐘

普通動(dòng)效即利用 canvas 的 api，實(shí)現(xiàn)有規(guī)則的圖案、動(dòng)畫。

效果

該效果實(shí)現(xiàn)比較簡(jiǎn)單，主要分析一下刻度與指針角度偏移的實(shí)現(xiàn)。

繪制刻度

此例為小時(shí)刻度的繪制：表盤上共有 12 個(gè)小時(shí)，Math.PI 為 180°，每小時(shí)占據(jù) 30°。

.save()表示保存 canvas 當(dāng)前環(huán)境的狀態(tài)，在此基礎(chǔ)上進(jìn)行繪制。繪制完成之后，返回之前保存過的路徑狀態(tài)和屬性。

分鐘刻度同理，改變角度與樣式即可。

//?小時(shí)時(shí)間刻度
offscreenCanvasCtx.save();
for?(var?i?=?0;?i?12;?i++)?{
??offscreenCanvasCtx.beginPath();
??//?刻度顏色
??offscreenCanvasCtx.strokeStyle?=?"#fff";
??//?刻度寬度
??offscreenCanvasCtx.lineWidth?=?3;
??//?每小時(shí)占據(jù)30°
??offscreenCanvasCtx.rotate(Math.PI?/?6);
??//?開始繪制的位置
??offscreenCanvasCtx.lineTo(140,?0);
??//?結(jié)束繪制的位置;
??offscreenCanvasCtx.lineTo(120,?0);
??//?繪制路徑
??offscreenCanvasCtx.stroke();
}
offscreenCanvasCtx.restore();

指針指向

以秒針為例：獲取當(dāng)前時(shí)間的秒數(shù)，并計(jì)算對(duì)應(yīng)的偏移角度

??var?now?=?new?Date(),
????sec?=?now.getSeconds(),
????min?=?now.getMinutes(),
????hr?=?now.getHours();
??hr?=?hr?12???hr?-?12?:?hr;

??//秒針
??offscreenCanvasCtx.save();
??offscreenCanvasCtx.rotate(sec?*?(Math.PI?/?30));
??......
??offscreenCanvasCtx.stroke();

粒子動(dòng)效

canvas 可以用來繪制復(fù)雜，不規(guī)則的動(dòng)畫。粒子特效可以用來實(shí)現(xiàn)復(fù)雜、隨機(jī)的動(dòng)態(tài)效果。

粒子，指圖像數(shù)據(jù)imageData中的每一個(gè)像素點(diǎn)，獲取到每個(gè)像素點(diǎn)之后，添加屬性或事件對(duì)區(qū)域內(nèi)的粒子進(jìn)行交互，達(dá)到動(dòng)態(tài)效果。

效果

粒子獲取

以下圖的圖片轉(zhuǎn)化為例，該效果是先在 canvas 上渲染圖片，然后獲取文字所在區(qū)域的每個(gè)像素點(diǎn)。

let?image?=?new?Image();
image.src?=?"../image/logo.png";
let?pixels?=?[];?//存儲(chǔ)像素?cái)?shù)據(jù)
let?imageData;
image.width?=?300;
image.height?=?300;
//?渲染圖片，并獲取該區(qū)域內(nèi)像素信息
image.onload?=?function()?{
??ctx.drawImage(
????image,
????(canvas.width?-?image.width)?/?2,
????(canvas.height?-?image.height)?/?2,
????image.width,
????image.height
??);
??imageData?=?ctx.getImageData(
????(canvas.width?-?image.width)?/?2,
????(canvas.height?-?image.height)?/?2,
????image.width,
????image.height
??);?//獲取圖表像素信息
??//繪制圖像
};

像素信息

圖片的大小為 300*300，共有 90000 個(gè)像素，每個(gè)像素占 4 位，存放 rgba 數(shù)據(jù)。

粒子繪制

function?getPixels()?{
??var?pos?=?0;
??var?data?=?imageData.data;?//RGBA的一維數(shù)組數(shù)據(jù)
??//源圖像的高度和寬度為300px
??for?(var?i?=?1;?i?<=?image.width;?i++)?{
????for?(var?j?=?1;?j?<=?image.height;?j++)?{
??????pos?=?[(i?-?1)?*?image.width?+?(j?-?1)]?*?4;?//取得像素位置
??????if?(data[pos]?>=?0)?{
????????var?pixel?=?{
??????????x:?(canvas.width?-?image.width)?/?2?+?j?+?Math.random()?*?20,?//重新設(shè)置每個(gè)像素的位置信息
??????????y:?(canvas.height?-?image.height)?/?2?+?i?+?Math.random()?*?20,?//重新設(shè)置每個(gè)像素的位置信息
??????????fillStyle:
????????????"rgba("?+
????????????data[pos]?+
????????????","?+
????????????data[pos?+?1]?+
????????????","?+
????????????data[pos?+?2]?+
????????????","?+
????????????data[pos?+?3]?+
????????????")"
????????};
????????pixels.push(pixel);
??????}
????}
??}
}
function?drawPixels()?{
??var?canvas?=?document.getElementById("myCanvas");
??var?ctx?=?canvas.getContext("2d");
??ctx.clearRect(0,?0,?canvas.width,?canvas.height);
??var?len?=?pixels.length,
????curr_pixel?=?null;
??for?(var?i?=?0;?i?????curr_pixel?=?pixels[i];
????ctx.fillStyle?=?curr_pixel.fillStyle;
????ctx.fillRect(curr_pixel.x,?curr_pixel.y,?1,?1);
??}
}

粒子時(shí)鐘

渲染文字時(shí)鐘

function?time()?{
??ctx.clearRect(0,?0,?canvas.width,?canvas.height);
??ctx.font?=?"150px?黑體";
??ctx.textBaseline?=?"top";
??ctx.fillStyle?=?"rgba(245,245,245,0.2)";
??ctx.fillText(
????new?Date().format("hh:mm:ss"),
????(canvas.width?-?textWidth)?/?2,
????(canvas.height?-?textHeight)?/?2,
????textWidth,
????textHeight
??);
}

效果

獲取粒子

文字轉(zhuǎn)換粒子概念同上，獲取選定區(qū)域的像素，根據(jù)篩選條件進(jìn)行選擇并存入數(shù)組。經(jīng)過遍歷后重新繪制。

function?getPixels()?{
??let?imgData?=?ctx.getImageData(
????(canvas.width?-?textWidth)?/?2,
????(canvas.height?-?textHeight)?/?2,
????textWidth,
????textHeight
??);
??let?data?=?imgData.data;
??pixelsArr?=?[];
??for?(let?i?=?1;?i?<=?textHeight;?i++)?{
????for?(let?j?=?1;?j?<=?textWidth;?j++)?{
??????pos?=?[(i?-?1)?*?textWidth?+?(j?-?1)]?*?4;?//取得像素位置
??????if?(data[pos]?>=?0)?{
????????var?pixel?=?{
??????????x:?j?+?Math.random()?*?20,?//重新設(shè)置每個(gè)像素的位置信息
??????????y:?i?+?Math.random()?*?20,?//重新設(shè)置每個(gè)像素的位置信息
??????????fillStyle:
????????????"rgba("?+
????????????data[pos]?+
????????????","?+
????????????data[pos?+?1]?+
????????????","?+
????????????data[pos?+?2]?+
????????????","?+
????????????data[pos?+?3]?+
????????????")"
????????};
????????pixelsArr.push(pixel);
??????}
????}
??}
}

imgData保存了所選區(qū)域內(nèi)的像素信息，每個(gè)像素點(diǎn)占據(jù) 4 位，保存了 RGBA 四位信息。篩選每個(gè)像素的第四位，這段代碼中將所有透明度不為 0 的像素都保存到了數(shù)組pixelsArr中。

x、y記載了該粒子的位置信息，為了產(chǎn)生效果圖中的運(yùn)動(dòng)效果，給每個(gè)粒子添加了 0-20 個(gè)像素的偏移位置，每次重繪時(shí)，偏移位置隨機(jī)生成，產(chǎn)生運(yùn)動(dòng)效果。

粒子重繪

獲取粒子之后，需要清除畫布中原有的文字，將獲取到的粒子重新繪制到畫布上去。

function?drawPixels()?{
??//?清除畫布內(nèi)容，進(jìn)行重繪
??ctx.clearRect(0,?0,?canvas.width,?canvas.height);
??for?(let?i?in?pixelsArr)?{
????ctx.fillStyle?=?pixelsArr[i].fillStyle;
????let?r?=?Math.random()?*?4;
????ctx.fillRect(pixelsArr[i].x,?pixelsArr[i].y,?r,?r);
??}
}

粒子重繪時(shí)的樣式為篩選像素時(shí)原本的顏色與透明度，并且每個(gè)在畫布上繪制每個(gè)粒子時(shí)，定義大小參數(shù) r，r 取值為 0-4 中隨機(jī)的數(shù)字。最終生成的粒子大小隨機(jī)。

實(shí)時(shí)刷新

獲取粒子并成功重繪之后，需要頁面實(shí)時(shí)刷新時(shí)間。這里采用window.requestAnimationFrame(callback)方法。

??function?time()?{
????......
????getpixels();?//獲取粒子
????drawPixels();?//?重繪粒子
????requestAnimationFrame(time);
??}

window.requestAnimationFrame(callback) 方法告訴瀏覽器您希望執(zhí)行動(dòng)畫并請(qǐng)求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來更新動(dòng)畫。該方法使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。

該方法不需要設(shè)置時(shí)間間隔，調(diào)用頻率采用系統(tǒng)時(shí)間間隔(1s)。

文檔解釋戳這里

效果

總結(jié)

本文主要通過兩種不同的方式實(shí)現(xiàn)了時(shí)鐘的動(dòng)態(tài)效果，其中粒子時(shí)鐘具有更多的可操作性。在以后的 canvas 系列中會(huì)針對(duì)粒子系統(tǒng)實(shí)現(xiàn)更多的動(dòng)態(tài)效果。

推薦閱讀

(點(diǎn)擊標(biāo)題可跳轉(zhuǎn)閱讀)

canvas 入門實(shí)戰(zhàn)--邀請(qǐng)卡生成與下載

基于 HTML5 Canvas 的交互式地鐵線路圖

Canvas 動(dòng)畫之支付寶價(jià)格拖動(dòng)選擇

覺得本文對(duì)你有幫助？請(qǐng)分享給更多人

關(guān)注「前端大全」加星標(biāo)，提升前端技能

喜歡就點(diǎn)一下「好看」唄~

總結(jié)

以上是生活随笔為你收集整理的canvas 文字颜色_canvas 中普通动效与粒子动效的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。