四川龙网

  1. 首页 > 生活知识 > >

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

生活百科用

【用canvas让美女沉浸在音符的海洋里】

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

文章插图
今天跟大家聊点轻松的话题——《用canvas让美女沉浸在音符的海洋里》，效果如下所示：
一、前期准备
为了能够实现这个效果，要进行如下准备：
  1. 一张梦寐以求的美女图片；
  2. 能够简单使用canvas；
  3. 准备一些音乐符号；
  4. 准备编辑器，由于该内容很偏向于实战，边敲边看效果更佳 。
二、具体实现
美女图片仅仅是作为背景使用，所以就不过多的讲述了，直接设置一下background属性即可，下面主要讲述一下音符动画的实现 。
2.1 音符符号
音符符号都可以用文字表示出来，没必要一个个自己去画，自己收集了一些，如下表格所示：【哎、当时自己不知道，还想着怎么画呢，最后经过一波神奇的百度才知道原来直接写文字就行，展示毫无障碍】
音符符号
含义
?
八分音符
?
二个八分音符
?
十六分音符
?
降记号
?
升记号
音乐符号g谱号
?
音乐自然标志
竖琴
……


2.2 封装绘制文字的类
既然音符符号可以用文字表示，那复杂的事情就变得简单了，直接封装一个绘制文字的类，话不多说开整 。
// index.jsclass 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};}


以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：


上一篇：梦见家中失火_周公解梦梦到家中失火是什么意思_做梦梦见家中失火好不好

下一篇：男人春季的衣服不用太多 男人衣服不需要太多