在之前小編就有說(shuō)過(guò)一些有關(guān)于html中有關(guān)于canvas標(biāo)簽的使用方法,那么今天我們就來(lái)說(shuō)說(shuō):“html怎么通過(guò)canvas標(biāo)簽實(shí)現(xiàn)普通動(dòng)效與粒子動(dòng)效?動(dòng)效實(shí)現(xiàn)效果案例分享!”這個(gè)問(wèn)題吧!
canvas用于在網(wǎng)頁(yè)上繪制圖像、動(dòng)畫(huà),可以將其理解為畫(huà)布,在這個(gè)畫(huà)布上構(gòu)建想要的效果。
canvas可以繪制動(dòng)態(tài)效果,除了常用的規(guī)則動(dòng)畫(huà)之外,還可以采用粒子的概念來(lái)實(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)畫(huà)。
效果
該效果實(shí)現(xiàn)比較簡(jiǎn)單,主要分析一下刻度與指針角度偏移的實(shí)現(xiàn)。
繪制刻度
此例為小時(shí)刻度的繪制:表盤(pán)上共有12個(gè)小時(shí),Math.PI為180°,每小時(shí)占據(jù)30°。
.save()表示保存canvas當(dāng)前環(huán)境的狀態(tài),在此基礎(chǔ)上進(jìn)行繪制。繪制完成之后,返回之前保存過(guò)的路徑狀態(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);
// 開(kāi)始繪制的位置
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可以用來(lái)繪制復(fù)雜,不規(guī)則的動(dòng)畫(huà)。粒子特效可以用來(lái)實(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 < len; 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)過(guò)遍歷后重新繪制。
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)效果。
粒子重繪
獲取粒子之后,需要清除畫(huà)布中原有的文字,將獲取到的粒子重新繪制到畫(huà)布上去。
function drawPixels() {
// 清除畫(huà)布內(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è)在畫(huà)布上繪制每個(gè)粒子時(shí),定義大小參數(shù)r,r取值為0-4中隨機(jī)的數(shù)字。最終生成的粒子大小隨機(jī)。
實(shí)時(shí)刷新
獲取粒子并成功重繪之后,需要頁(yè)面實(shí)時(shí)刷新時(shí)間。這里采用window.requestAnimationFrame(callback)
方法。
function time() {
......
getpixels(); //獲取粒子
drawPixels(); // 重繪粒子
requestAnimationFrame(time);
}
window.requestAnimationFrame(callback)
方法告訴瀏覽器您希望執(zhí)行動(dòng)畫(huà)并請(qǐng)求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來(lái)更新動(dòng)畫(huà)。該方法使用一個(gè)回調(diào)函數(shù)作為參數(shù),這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。
該方法不需要設(shè)置時(shí)間間隔,調(diào)用頻率采用系統(tǒng)時(shí)間間隔(1s)。
效果
總結(jié)
本文主要通過(guò)兩種不同的方式實(shí)現(xiàn)了時(shí)鐘的動(dòng)態(tài)效果,其中粒子時(shí)鐘具有更多的可操作性。在以后的canvas系列中會(huì)針對(duì)粒子系統(tǒng)實(shí)現(xiàn)更多的動(dòng)態(tài)效果。
那么在本文中相信大家對(duì)于:“html怎么通過(guò)canvas標(biāo)簽實(shí)現(xiàn)普通動(dòng)效與粒子動(dòng)效?動(dòng)效實(shí)現(xiàn)效果案例分享!”這個(gè)問(wèn)題有所了解了,當(dāng)然在html中對(duì)于canvas的標(biāo)簽使用不僅僅如此,更多的關(guān)于html中的canvas標(biāo)簽使用方法和案例我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。