建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用Canvas讓美女沉浸在音符的海洋里
一、前期準(zhǔn)備
- 一張夢寐以求的美女圖片；
- 能夠簡單使用canvas；
- 準(zhǔn)備一些音樂符號(hào)；
- 準(zhǔn)備編輯器，由于該內(nèi)容很偏向于實(shí)戰(zhàn)，邊敲邊看效果更佳。
二、具體實(shí)現(xiàn)
美女圖片僅僅是作為背景使用，所以就不過多的講述了，直接設(shè)置一下background屬性即可，下面主要講述一下音符動(dòng)畫的實(shí)現(xiàn)。
為龍口等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及龍口網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、網(wǎng)站制作、龍口網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
2.1 音符符號(hào)
|
音符符號(hào) |
含義 |
|
八分音符 |
|
|
二個(gè)八分音符 |
|
|
十六分音符 |
|
|
降記號(hào) |
|
|
升記號(hào) |
|
|
???? |
音樂符號(hào)g譜號(hào) |
|
音樂自然標(biāo)志 |
|
|
???? |
豎琴 |
|
…… |
2.2 封裝繪制文字的類
既然音符符號(hào)可以用文字表示，那復(fù)雜的事情就變得簡單了，直接封裝一個(gè)繪制文字的類，話不多說開整。
// index.js
class Draw {
// 傳入一個(gè)canvas的DOM節(jié)點(diǎn)
constructor(canvasDom) {
this._canvasDom = canvasDom;
this.ctx = this._canvasDom.getContext('2d');
this.width = this._canvasDom.width;
this.height = this._canvasDom.height;
}
// 清空畫布，畢竟要讓音符動(dòng)起來，不清空畫布那還了得
clearCanvas() {
this.ctx.clearRect(0, 0, this.width, this.height);
}
// 根據(jù)傳入的參數(shù)繪制文字
drawText(textObj) {
const {
x,
y,
rotateRad,
font,
content,
fillStyle = '#000000',
textAlign = 'start',
textBaseline = 'middle'
} = textObj;
this.ctx.save();
this.ctx.translate(x, y);
this.ctx.rotate(rotateRad);
this.ctx.fillStyle = fillStyle;
this.ctx.textAlign = textAlign;
this.ctx.textBaseline = textBaseline;
this.ctx.font = font;
this.ctx.fillText(content, 0, 0);
this.ctx.restore();
}
}
2.3 創(chuàng)建文字條件
在封裝文字類的時(shí)候已經(jīng)發(fā)現(xiàn)其接收一個(gè)對(duì)象，然后根據(jù)對(duì)象來進(jìn)行繪制，那我們接下來就是要根據(jù)需求創(chuàng)建一個(gè)這樣的對(duì)象，怎么創(chuàng)建呢?如下所示：
// index.js
/**
* @param {string} content 繪制的內(nèi)容
* @param {object} canvasObj canvas相關(guān)的內(nèi)容
* param {object} conditionsObj 生成文字配置所需要的條件
*/
function createTextObj(content, canvasObj, conditionsObj) {
const {width, height} = canvasObj;
const {
fontMin = 20,
fontMax = 40,
direction = 3, // 0:從左到右；1：從右到左；2：從上到下；3：從下到上
baseStep = 0.5
} = conditionsObj;
let textX = 0;
let textY = 0;
// 注意：這個(gè)位置預(yù)制了direction條件，因?yàn)樵蹅兊囊舴獎(jiǎng)悠饋?，所以設(shè)置一下從哪個(gè)方向進(jìn)行浮動(dòng)
// 預(yù)制的初始坐標(biāo)肯定不能被我們看到，所以需要根據(jù)方向決定初始坐標(biāo)
switch(direction) {
case 0: {
textX = (-0.1 - 0.1 * Math.random()) * width;
textY = Math.random() * height;
break;
}
case 1: {
textX = (1.1 + 0.1 * Math.random()) * width;
textY = Math.random() * height;
break;
}
case 2: {
textX = Math.random() * width;
textY = (-0.1 - 0.1 * Math.random()) * height;
break;
}
case 3: {
textX = Math.random() * width;
textY = (1.1 + 0.1 * Math.random()) * height;
break;
}
}
// 都是一個(gè)方位也不好看呀，所以要旋轉(zhuǎn)一下
const rotateRad = Math.PI * Math.random();
const font = Math.random() * (fontMax - fontMin) + fontMin + 'px serif';
// 設(shè)置一下直線運(yùn)動(dòng)和旋轉(zhuǎn)運(yùn)動(dòng)的步長
const step = Math.random() + baseStep;
const rotateStep = Math.random() * Math.PI / 100;
const fillStyle = 'rgba(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + (0.5 + 0.5 * Math.random()) + ')';
return {
x: textX,
y: textY,
rotateRad,
font,
fillStyle,
content,
step,
rotateStep,
direction
};
}
2.4 更新文字配置
既然音符會(huì)動(dòng)起來，則咱們就要逐幀進(jìn)行更新，那更新函數(shù)就不能避免了，更新函數(shù)如下所示：
// index.js
/**
* @param {object} canvasObj canvas相關(guān)的內(nèi)容
* @param {Array} textObjArr 文字配置對(duì)象的數(shù)組
* param {object} conditionsObj 生成文字配置所需要的條件
*/
function updateTextObjArr(canvasObj, textObjArr, conditionsObj) {
const {width, height} = canvasObj;
textObjArr.forEach((textObj, index) => {
const {step, rotateStep, x, y, direction} = textObj;
// 根據(jù)運(yùn)動(dòng)方向做對(duì)應(yīng)的更新
// 當(dāng)音符符號(hào)運(yùn)動(dòng)出可視區(qū)域后直接在生成一個(gè)新的音符，畢竟要保證整個(gè)音符的數(shù)量
switch(direction) {
case 0: {
if (x > width + 10) {
textObjArr[index] = createTextObj(getRandomValFromArr(TEXT_CONTENT_ARR), canvasObj, conditionsObj);
} else {
textObj.x += step;
}
break;
}
case 1: {
if (x < -10) {
textObjArr[index] = createTextObj(getRandomValFromArr(TEXT_CONTENT_ARR), canvasObj, conditionsObj);
} else {
textObj.x -= step;
}
break;
}
case 2: {
if (y > height + 10) {
textObjArr[index] = createTextObj(getRandomValFromArr(TEXT_CONTENT_ARR), canvasObj, conditionsObj);
} else {
textObj.y += step;
}
break;
}
case 3: {
if (y < -10) {
textObjArr[index] = createTextObj(getRandomValFromArr(TEXT_CONTENT_ARR), canvasObj, conditionsObj);
} else {
textObj.y -= step;
}
break;
}
}
textObj.rotateRad += rotateStep;
});
return textObjArr;
}
2.5 動(dòng)起來
萬事俱備，只欠東風(fēng)，下面就是我們調(diào)動(dòng)這些函數(shù)讓整個(gè)內(nèi)容動(dòng)起來的關(guān)鍵時(shí)刻。
音樂字符
本文轉(zhuǎn)載自微信公眾號(hào)「前端點(diǎn)線面」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端點(diǎn)線面公眾號(hào)。
文章標(biāo)題：用Canvas讓美女沉浸在音符的海洋里
標(biāo)題URL：http://m.5511xx.com/article/dhcoicg.html
