<!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. VC++ 线程同步 总结

    注:所谓同步,并不是多个线程一起同时执行,而是他们协同步调,按预定的先后次序执行. 与线程相关的基本函数包括:CreateThread:创建线程CloseHandle:关闭线程句柄.注意,这只会使指定 ...

  2. SqlSever基础 dateadd year，增加五年

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. HTML系列(HTMl+CSS+JavaScript+Jquery)--un

    HTML 指超文本标签语言. 点击查看更详细的HTML内容 包括:一.基本标签;二.常用标签;三.表单<form></form>;四.表格<table></t ...

  4. [Lonlife1031]Bob and Alice are eating food（递推，矩阵快速幂）

    题目链接:http://www.ifrog.cc/acm/problem/1031 题意:6个水果中挑出n个,使得其中2个水果个数必须是偶数,问有多少种选择方法. 设中0代表偶数,1代表奇数.分别代表 ...

  5. weblogic解密工具

    import org.bouncycastle.jce.provider.BouncyCastleProvider; import sun.misc.BASE64Decoder; import jav ...

  6. C#登录窗口及验证(+SQL)

    团队成员及分工 团队: Blue 团队共有六人 姓名:     学号后四位:       贡献分: 张   宇(队长)  1152          1+1.7=2.7分 丁志愿          1 ...

  7. StopWatch的使用

    //StopWatch在System.Diagnostics命名控件,要使用它就要先引用这个命名空间. //其使用方法如下: //var stopWatch = new StopWatch(); // ...

  8. Python基础学习笔记（十三）异常

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-exceptions.html Python用异常对象(excep ...

  9. SAP 关于标准成本、计划成本、目标成本、实际成本

    SAP 关于标准成本.计划成本.目标成本.实际成本 <A style="MARGIN-RIGHT: 10px" target=_blank data-ext="{v ...

  10. [转载] 【每周推荐阅读】C-Store：列式存储数据库

    Record-based与column-based是数据库和存储系统里面两种不同的data layout.我们的思维逻辑是基于行记录的,即Record-based data layout,数据记录都是 ...