<!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. 配置Python+selenium+firefox自动化测试

    1.安装python.默认安装 2.安装pip.下载pip-1.5.4包,解压pip-1.5.4,放在C盘,进入pip目录-->键入命令:python setup.py install  再进入 ...

  2. 双击Button按钮后执行的函数

    在MFC中,当在用户界面拖入一个button后,双击会进入cpp文件,实现一个按钮点击的方法如: void CtestcontorlDlg::OnBnClickedButton() { : } 理解: ...

  3. UIEdgeInsetsMake, CGRectOffset等API参数详解

    1, UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right ) 2,position点是相对suerL ...

  4. Python3基础 使用技巧:多行同时缩进

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

  5. 一维条码打印的C#实现（Code128）

    1.CODE128基础知识 CODE128有三个版本: CODE128A: 标准数字和字母, 控制符, 特殊字符 CODE128B: 标准数字和字母, 小写字母, 特殊字符 CODE128C: [00 ...

  6. 【leetcode❤python】 205. Isomorphic Strings

    #-*- coding: UTF-8 -*- #转换法class Solution(object):    def isIsomorphic(self, s, t):        "&qu ...

  7. ProgressDialog 的 使用

    一 . ProgressDialog ProgressDialog是AlertDialog类的一个扩展,可以为一个未定义进度的任务显示一个旋转轮形状的进度动画,或者为一个指定进度的任务显示一个进度条. ...

  8. Using SSH on Linux

    This document covers the SSH client on the Linux Operating System and other OSes that use OpenSSH. W ...

  9. javascript权威指南笔记--javascript语言核心（一）

    1.javascript的数据类型分为两类:原始类型和对象类型. 原始类型包括字符串.数字.布尔值.null.undefined. 对象是属性的集合,每个对象都由“名/值”对构成.数组和函数是特殊的对 ...

  10. 《Linux内核设计的艺术》学习笔记（二）INT 0x13中断

    参考资料: 1. <IBM-PC汇编语言程序设计> 2. http://blog.sina.com.cn/s/blog_5028978101008wk2.html 3. http://ww ...