今天跟大家聊点轻松的话题——《用canvas让美女沉浸在音符的海洋里》,效果如下所示:

茶已备好,只待君来!感谢关注 前端点线面 (>‿<),本号定期推荐原创深度好文,帮助每一位在前端领域打拼的伙伴们走向前列,关注号主可阅读14个门类100+篇)的原创文章;获取《前端百题斩》pdf(助力薪资double)、20+思维导图(知识系统化、记忆简单化),并进前端划水交流群(小姐姐多多

一、前期准备

为了能够实现这个效果,要进行如下准备:

  1. 一张梦寐以求的美女图片;

  2. 能够简单使用canvas;

  3. 准备一些音乐符号;

  4. 准备编辑器,由于该内容很偏向于实战,边敲边看效果更佳。

二、具体实现

美女图片仅仅是作为背景使用,所以就不过多的讲述了,直接设置一下background属性即可,下面主要讲述一下音符动画的实现。

2.1 音符符号

音符符号都可以用文字表示出来,没必要一个个自己去画,自己收集了一些,如下表格所示:【哎、当时自己不知道,还想着怎么画呢,最后经过一波神奇的百度才知道原来直接写文字就行,展示毫无障碍】

音符符号 含义
八分音符
二个八分音符
十六分音符
降记号
升记号

用canvas让美女沉浸在音符的海洋里相关推荐

  1. 带你沉浸式畅游电子海洋

    关注+星标公众号,不错过精彩内容 来源 | e星球服务站 电子工程师几乎大部分时间都在与各种电子元器件打交道,想要做出好的电子产品,不仅仅要熟知各种电子元器件,还要要多参观和了解那些优秀的产品. 这里 ...

  2. 用canvas实现小方块的音符跳动

    //绘制小方块function videobg(x,y,canvasGradient){var c1 = document.getElementById("canvas");//v ...

  3. 计算机社团竞选优势6,社团社长竞选稿六篇

    社团社长竞选稿六篇 在社会一步步向前发展的今天,用到竞选稿的地方越来越多,竞选稿可以帮助竞选者更好地表达.还是对竞选稿一筹莫展吗?以下是小编为大家收集的社团社长竞选稿6篇,仅供参考,希望能够帮助到大家 ...

  4. 大数据,并非一蹴而就

    前言 大数据,并非一蹴而就. 大数据的时代,已悄然而至,殊不知,我们已被数据的海洋环绕.环顾左右,有人争相控之,有人只缘身在此山中,云深不知处,当然,也有溺者. 当第一次接触大数据的时候,并不感冒,感 ...

  5. 怎么用纸做圆形的盒子_如何培养孩子逻辑思维能力?抓住0-8岁关键期,聪明的家长这样做...

    最近和朋友聊天,他特别苦恼和纳闷:我的孩子幼儿园和刚进入小学时成绩总是名列前茅,怎么越往后成绩越差,这是为什么呢? 这种现象还是挺经常出现的,幼儿园和小学1-3年级阶段,孩子努力用功是可以取得好成绩的 ...

  6. 幼儿抽象逻辑思维举例_孩子逻辑思维能力有多重要?巧用生活小游戏,培养好了娃受益终身...

    最近和朋友聊天,他特别苦恼和纳闷:我的孩子幼儿园和刚进入小学时成绩总是名列前茅,怎么越往后成绩越差,这是为什么呢? 这种现象还是挺经常出现的,幼儿园和小学1-3年级阶段,孩子努力用功是可以取得好成绩的 ...

  7. 国培计算机音乐教学设计作业,2017国培计划教学设计

    2017国培计划教学设计 教学工作任重而道远,面对国培教学内容,希望与挑战并存.下面是学习啦小编为大家整理的2017国培计划教学设计,供大家阅读! 2017国培计划教学设计篇1 一.指导思想 以&qu ...

  8. 年薪50万开发者相亲失败:程序员,别输在不会说话上

    关注"Java后端技术全栈" 回复"000"获取大量电子书 Ⅰ 越来越不会说话的程序员 "编程能力很赞,但沟通能力可能有所欠缺"--很多人这 ...

  9. 如何扩大你的心理舒适区?

    1. 什么是心理舒适区? 维基百科对心理舒适区的定义是这样的:从心理学的角度,你的舒适区是一个你人为构想出来的一个让你保持安全感和免受不舒服的感觉的边界.(From a psychological s ...

  10. list object has no attribute ZScan_书香家庭NO.31 | 成长路上飘书香

    点击蓝字 关注我们 大家好,我叫张艺铷,是新华区实验小学三(2)班的学生. 我喜欢读书,因为在书的海洋里遨游是一件很快乐的事.书是我忠实的伙伴,每一本书里都饱含着许多知识,就拿暑假期间我看的<窗 ...

最新文章

  1. 今年,自动驾驶卡车将在无人驾驶的情况下上路
  2. python的优点-python的功能与优缺点
  3. matlab-画图函数:scatter和plot
  4. U3D 扩展方法 Dotween tolua
  5. EasyUI可编辑列
  6. jquery实现截取pc图片_html+jquery实现简单图片裁剪
  7. 总结之Unix的基础知识
  8. 印象笔记如何分享链接_印象笔记共享问题解决经过
  9. linux误删除文件恢复
  10. 英特尔显卡linux管理_Intel Linux 显卡驱动安装指南
  11. android 地图侧滑栏,Android封装侧滑菜单栏
  12. 云和恩墨mysql_云和恩墨携手华为云鲲鹏云服务探索政企数据库升级的“新引擎”...
  13. BZOJ1665 Usaco2006 Open The Climbing Wall
  14. Bootstrap导航和导航条
  15. VR全景购物,2022年的购物新方式
  16. LCD背光驱动 --Backlight
  17. 【已解决】IDEA创建Maven多模块项目子模块引用不到父模块的pom
  18. Google收购摩托罗拉移动
  19. 无需root或更换系统!氧os-(Oxygen-OS-)开通公交卡新姿势get!(附提取一加公交卡APP)
  20. 李开复给大学生的第四封信---大学四年应是这样度过

热门文章

  1. js-实现数组翻转(倒序)
  2. 对一个浮点数保留两位小数
  3. 服务器备案全流程超级详细
  4. SiT1602:SiTime低功耗单端有源晶振
  5. android 蒙版控件,Android开发UI之给ImageView添加蒙版
  6. IE浏览器设置默认文档模式
  7. 正则表达式验证邮箱手机号
  8. mozhe靶场——网络安全——投票系统程序设计缺陷分析
  9. 如何提升数据化管理效率
  10. 2023年南开大学税务专硕考研上岸前辈备考经验指导