<!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. Android BroadcastReceiver广播接受者

    静态注册 配置清单表注册:只要曾经注册过哪怕关闭也能调用  方式一:sendBroadCastReceive   广播的步骤:       发送  无序广播,普通广播       (1).发送方    ...

  2. 有关Duilib的博客(持续更新)

    1.转载:http://blog.csdn.net/LostSpeed/article/category/1896505 2.支持多线程和动画 转载:http://blog.csdn.net/Skil ...

  3. CentOS6.6系统源代码安装mysql5.5.28教程（附源码包下载地址）+sysbench的安装

    mysql从5.5版本开始,不再使用./configure编译,而是使用cmake编译器,具体的cmake编译参数可以参考mysql官网文档(※ 非常重要) http://dev.mysql.com/ ...

  4. AOD.net

    ADO.NET中的五个主要对象 Connection 物件Connection 对象主要是开启程序和数据库之间的连结.没有利用连结对象将数据库打开,是无法从数据库中取得数据的.这个物件在ADO.NET ...

  5. C# Eval()和Bind()

    Eval( " ")和Bind( " ") 这两种一个单向绑定,一个双向绑定,bind是双向绑定,但需数据源支持ASP.NET   2.0改善了模板中的数据绑定 ...

  6. HTML(Open Method)翻译自MSDN

    Open Method Opens a new window and loads the document specified by a given URL. Navigates the app wi ...

  7. Java-基础编程（螺旋矩阵&乘法表）

    package cn.rick.study; import java.io.BufferedReader;import java.io.InputStreamReader;import java.ut ...

  8. FreeSWITCH的TLS加密

    听着很高大上(实际也很实用)的加密机制,在FreeSWITCH里配置支持竟然这么简单! Greate FreeSWITCH and Greate Programmer! ① cd /usr/local ...

  9. SpringMVC 配置过滤器解决中文乱码问题

    <!-- 字符集过滤器 -->      <filter>          <filter-name>Charset</filter-name>   ...

  10. windows c dll的创建与调用

    DLL代码: // TestDynamic.cpp: implementation of the TestDynamic class. // ///////////////////////////// ...