大主宰天蚕土豆,兽性总裁的爱奴,辰东完美世界有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

用Canvas讓美女沉浸在音符的海洋里

一、前期準(zhǔn)備

一張夢寐以求的美女圖片；
能夠簡單使用canvas；
準(zhǔn)備一些音樂符號；
準(zhǔn)備編輯器，由于該內(nèi)容很偏向于實戰(zhàn)，邊敲邊看效果更佳。

二、具體實現(xiàn)

美女圖片僅僅是作為背景使用，所以就不過多的講述了，直接設(shè)置一下background屬性即可，下面主要講述一下音符動畫的實現(xiàn)。

為龍口等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及龍口網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、網(wǎng)站制作、龍口網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

2.1 音符符號

音符符號	含義
	八分音符
	二個八分音符
	十六分音符
	降記號
	升記號
????	音樂符號g譜號
	音樂自然標(biāo)志
????	豎琴
……

2.2 封裝繪制文字的類

既然音符符號可以用文字表示，那復(fù)雜的事情就變得簡單了，直接封裝一個繪制文字的類，話不多說開整。

// index.js
class Draw {
    // 傳入一個canvas的DOM節(jié)點
    constructor(canvasDom) {
        this._canvasDom = canvasDom;
        this.ctx = this._canvasDom.getContext('2d');
        this.width = this._canvasDom.width;
        this.height = this._canvasDom.height;
    }

    // 清空畫布，畢竟要讓音符動起來，不清空畫布那還了得
    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)建文字條件

在封裝文字類的時候已經(jīng)發(fā)現(xiàn)其接收一個對象，然后根據(jù)對象來進行繪制，那我們接下來就是要根據(jù)需求創(chuàng)建一個這樣的對象，怎么創(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;

    // 注意：這個位置預(yù)制了direction條件，因為咱們的音符要動起來，所以設(shè)置一下從哪個方向進行浮動
    // 預(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;
        }
    }

    // 都是一個方位也不好看呀，所以要旋轉(zhuǎn)一下
    const rotateRad = Math.PI * Math.random();
    const font = Math.random() * (fontMax - fontMin) + fontMin + 'px serif';
    // 設(shè)置一下直線運動和旋轉(zhuǎn)運動的步長
    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 更新文字配置

既然音符會動起來，則咱們就要逐幀進行更新，那更新函數(shù)就不能避免了，更新函數(shù)如下所示：

// index.js
/**
* @param {object} canvasObj canvas相關(guān)的內(nèi)容
* @param {Array} textObjArr 文字配置對象的數(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īng)的更新
        // 當(dāng)音符符號運動出可視區(qū)域后直接在生成一個新的音符，畢竟要保證整個音符的數(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 動起來

萬事俱備，只欠東風(fēng)，下面就是我們調(diào)動這些函數(shù)讓整個內(nèi)容動起來的關(guān)鍵時刻。





    音樂字符

本文轉(zhuǎn)載自微信公眾號「前端點線面」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端點線面公眾號。

網(wǎng)站題目：用Canvas讓美女沉浸在音符的海洋里
URL鏈接：http://m.fisionsoft.com.cn/article/dhcoicg.html