<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         canvas{

             border: solid;

         }

     </style>

 </head>

 <body>

 <canvas id="canvas" width="400" height="300"></canvas>

 <script src="main.js"></script>

 </body>

 </html>
 (function () {

     var curX = -400, speed = 1;

     var text = "Hello World";

     var canvas = document.getElementById("canvas");

     var con = canvas.getContext("2d");

     function clearCanvas() {

         con.clearRect(0, 0, 400, 300);

     }

     function render() {

         clearCanvas();

         con.save();

         con.font = "50px 宋体";

         con.fillStyle = "#abcdef";

         con.fillText(text, 80, 250);

         con.restore();

         con.save();

         con.beginPath();

         curX += speed;

         con.rect(curX, 0, 400, 300);

         con.closePath();

         con.clip();

         con.font = "50px 宋体";

         con.fillStyle = "coral";

         con.fillText(text, 80, 250);

         con.restore();

         // console.log("e");

         requestAnimationFrame(render);

     }

     function init() {

         render();

     }

     init();

 })();

canvas实现音乐中的歌词播放效果的更多相关文章

  1. 轻仿QQ音乐之音频歌词播放、锁屏歌词-b

    先上效果图 歌词播放界面 音乐播放界面 锁屏歌词界面 一. 项目概述 前面内容实在是太基础..只想看知识点的同学可以直接跳到第三部分的干货 项目播放的mp3文件及lrc文件均来自QQ音乐 本文主要主要 ...

  2. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  3. 浅谈canvas中的拖尾效果

    引言 很早就想了解以下 canvas 中的拖尾效果(如彗星,烟花等效果)是怎么实现的,但是一直没有深入了解,正巧在 codepen 上看到一个 demo,代码简单,效果炫酷,故有此文. 什么黑科技 在 ...

  4. 10、 在QQ音乐中爬取某首歌曲的歌词

        需求就是把关卡内的代码稍作修改,将周杰伦前五页歌曲的歌词都爬取下来,结果就是全部展示打印出来.       URL  https://y.qq.com/portal/search.html#p ...

  5. canvas 视频音乐播放器

    canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img ...

  6. 驳Linux不娱乐 堪比Win平台中十款播放器

    播放器在我们日常生活中扮演着非常重要的角色,在Windows操作系统中,播放器被应用的非常广泛,不但我们可以听音乐,甚至还可以听广播,制作铃声,下载音乐等等.而在Linux发行版中,缺少娱乐性一直性W ...

  7. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  8. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  9. 在UWP应用中实现Gif播放

    众所周知,在UWP应用框架中,Image控件是无法播放GIF的图片,只能显示静态图,这样的体验不是特别友好.我在Win8.WP8.1的时候实现过gif播放功能,但是最近发现性能和播放效果都差强人意,大 ...

随机推荐

  1. QT笔记之VS2010 Qt中导入qrc资源文件

    转载1:http://qimo601.iteye.com/blog/1404693 转载2:http://blog.sina.com.cn/s/blog_92cde3060101lobm.html 转 ...

  2. JavaScript的循环语句

    JavaScript的循环语句 1.JavaScript的循环语句 (1)for循环语句 - 循环代码块一定的次数: (2)for/in循环语句 - 循环遍历对象的属性: (3)while循环语句 - ...

  3. 网络文件常常提到类似"./run.sh"的数据，这个命令的意义是什么？

    由于命令的执行需要变量的支持,若你的执行文件放置在本目录,并且本目录并非正规的执行文件目录(/bin./usr/bin 等为正规),此时要执行命令就得要严格指定该执行文件."./" ...

  4. 定义一个“点”（Point）类用来表示三维空间中的点（有三个坐标）。要求如下： （1）可以生成具有特定坐标的点对象。 （2）提供可以设置三个坐标的方法。 （3）提供可以计算该“点”距原点距离平方的方法。 （4）编写主类程序验证。

    package b; public interface ZuoBiao { double zuobiao(); } package b; public class Point implements Z ...

  5. ServiceStack.OrmLite 笔记5 改

    修改 db.Update(new Person { Id = 1, FirstName = "Jimi", LastName = "Hendrix", Age ...

  6. STL--list

    List-概述: 列表List是一个线性链表结构(Double—Linked Lists,双链表),它的数据由若干个节点构成,每一个节点都包括一个信息块Info(即实际存储的数据).一个前驱指针Pre ...

  7. Java多线程同步问题的探究

    一.线程的先来后到——问题的提出:为什么要有多线程同步?Java多线程同步的机制是什么? http://www.blogjava.net/zhangwei217245/archive/2010/03/ ...

  8. 这只是一篇用Markdown写的随记，就是熟悉熟悉MarkDown而已

    这几天的随想 今天是八月十一号了,来到公司实习已经第八天了,包块周末的话就是十二天了,我在这十二天里干了什么,转眼半个月就过去了 马上就要开学了,这个暑假干了些什么,单词单词也没背多少,之前七月回家有 ...

  9. Java初始化（构造器）

    在类的内部,变量定义的先后顺序决定了初始化的顺序.即使变量定义散布于方法定义之间,它们仍旧会在任何方法(包括构造器)被调用之前得到初始化. import static humeng.com.cnblo ...

  10. iOS - Swift NSKeyedArchiver 数据归档

    前言 public class NSKeyedArchiver : NSCoder public class NSKeyedUnarchiver : NSCoder 在 OC 语言中,归档是一个过程, ...