<!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. mongodb数据库设计原则

    1.一对很少  one-to-few  可以采用内嵌文档 person集合中 { name:'张三', age:20, address:[ {country:"中国",provin ...

  2. PowerDesigner导出Excel

    1.打开PowerDesigner,创建物理模型(Physical Data Model) 2.在PowerDesigner菜单栏中,依次点击“Tools ->Excute Commands-& ...

  3. 02.iOS开发网络篇—HTTP协议

    iOS开发网络篇—HTTP协议 说明:apache tomcat服务器必须占用8080端口 一.URL 1.基本介绍 URL的全称是Uniform Resource Locator(统一资源定位符) ...

  4. FZU 2147 A-B Game

    A-B Game Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Sta ...

  5. .bash_profile和.bashrc的区别,ubuntu下为.profile,没有.bash_profile

    .bash_profile 开机自动加载,比如java的环境变量放在里面 .bashrc打开shell或终端就会加载该文件,比如起的别名或快捷方式放里面.alias设置就在其中. 还有一个.profi ...

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

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

  7. 美国插画家Mike Bear作品欣赏

    Mike Bear,美国插画师兼概念艺术家,在漫画和游戏界从业6年有余,分别为包括Popcap.Rockstar Games.Hasbro.EA等在内的业界巨头创建作品.他的画风较为抽象,大胆想象出一 ...

  8. MemSQL Start[c]UP 2.0 - Round 1（无聊练手B题）

    http://codeforces.com/contest/452/problem/B   B. 4-point polyline time limit per test 2 seconds memo ...

  9. js操作cookie，实现登录密码保存 [转]

    转自:http://blog.csdn.net/zyujie/article/details/8727828 ( 谢谢博主了) js操作cookie,实现登录密码保存.cookie的存放方式是以键值对 ...

  10. [转载] zookeeper faq

    Zookeeper FAQ1. 如何处理CONNECTION_LOSS?在Zookeeper中,服务器和客户端之间维持一个长连接,CONNECTION_LOSS意味着这个连接断开了.客户端API返回C ...