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

一、前期准备

• 一张梦寐以求的美女图片；
• 能够简单使用canvas；
• 准备一些音乐符号；
• 准备编辑器，由于该内容很偏向于实战，边敲边看效果更佳。

二、具体实现

美女图片仅仅是作为背景使用，所以就不过多的讲述了，直接设置一下background属性即可，下面主要讲述一下音符动画的实现。

为龙口等地区用户提供了全套网页设计制作服务，及龙口网站建设行业解决方案。主营业务为做网站、网站制作、龙口网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

2.1 音符符号

2.2 封装绘制文字的类

既然音符符号可以用文字表示，那复杂的事情就变得简单了，直接封装一个绘制文字的类，话不多说开整。

// index.js
class Draw {
    // 传入一个canvas的DOM节点
    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);
    }

    // 根据传入的参数绘制文字
    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 创建文字条件

在封装文字类的时候已经发现其接收一个对象，然后根据对象来进行绘制，那我们接下来就是要根据需求创建一个这样的对象，怎么创建呢?如下所示：

// index.js
/**
* @param {string} content 绘制的内容
* @param {object} canvasObj canvas相关的内容
* 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;

    // 注意：这个位置预制了direction条件，因为咱们的音符要动起来，所以设置一下从哪个方向进行浮动
    // 预制的初始坐标肯定不能被我们看到，所以需要根据方向决定初始坐标
    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;
        }
    }

    // 都是一个方位也不好看呀，所以要旋转一下
    const rotateRad = Math.PI * Math.random();
    const font = Math.random() * (fontMax - fontMin) + fontMin + 'px serif';
    // 设置一下直线运动和旋转运动的步长
    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 更新文字配置

既然音符会动起来，则咱们就要逐帧进行更新，那更新函数就不能避免了，更新函数如下所示：

// index.js
/**
* @param {object} canvasObj canvas相关的内容
* @param {Array} textObjArr 文字配置对象的数组
* param {object} conditionsObj 生成文字配置所需要的条件
*/
function updateTextObjArr(canvasObj, textObjArr, conditionsObj) {
    const {width, height} = canvasObj;

    textObjArr.forEach((textObj, index) => {
        const {step, rotateStep, x, y, direction} = textObj;

        // 根据运动方向做对应的更新
        // 当音符符号运动出可视区域后直接在生成一个新的音符，毕竟要保证整个音符的数量
        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 动起来

万事俱备，只欠东风，下面就是我们调动这些函数让整个内容动起来的关键时刻。

本文转载自微信公众号「前端点线面」，可以通过以下二维码关注。转载本文请联系前端点线面公众号。

网站标题：用Canvas让美女沉浸在音符的海洋里
当前URL：http://www.shufengxianlan.com/qtweb/news1/252701.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联