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

//绘制小方块function videobg(x,y,canvasGradient){var c1 = document.getElementById("canvas");//var r=112+(Math.random()*223);if(c1.getContext('2d')){var ctx = c1.getContext("2d");for(var i=0;i<Math.random()*149+1;i++){ctx.beginPath();ctx.fillRect(x+5,y-i*1.5,16,4);canvasGradient=ctx.createLinearGradient(x+5,y-400,x+5,343);canvasGradient.addColorStop(1,'rgb(42, 231, 0)');//绿canvasGradient.addColorStop(0.4,'rgb(216, 9, 0)');//红canvasGradient.addColorStop(0,'rgb(228, 219, 0)');//黄ctx.fillStyle = canvasGradient;ctx.fillRect(x+5,y-i*1.5,16,4);ctx.stroke();ctx.closePath();i+=5;}}}

window.onload = function () {var heightR = 0;var c1 = document.getElementById('canvas');var ctx = c1.getContext('2d');function clear(){ctx.clearRect(20,120,500,300);}

<pre name="code" class="html">function clear(){ctx.clearRect(20,120,500,300);}function play(){clear();videobg(37,340,'');videobg(58,340,'');videobg(95,340,'');videobg(116,340,'');videobg(153,340,'');videobg(174,340,'');videobg(211,340,'');videobg(232,340,'');videobg(269,340,'');videobg(290,340,'');videobg(327,340,'');videobg(348,340,'');text('', 58, 360, '#ffffff');}var time = setInterval(play,200);}

用canvas实现小方块的音符跳动相关推荐

html5圆形图片自动旋转,HTML5/Canvas 彩虹小方块圆盘旋转
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas, ctx, width, height, xCenter, yCenter, squa ...
俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
使用 icon 字体图标出现小方块问题
今天在弄一个vue 项目的时候,碰到了引入icon 出现错误,现在总结一下问题: 主要碰到两个错误 1:路径错误,报错找不到modules, 2:路径错误,但是没有报错,只是显示小方块(也就是没有显示 ...
红色小方块单击爆炸式展开的菜单代码
代码简介:不知道能给它起个什么名字,就叫做"爆炸式菜单"吧,因为它的效果很像是爆炸开了,鼠标点击后会以一个五角星为基准单元依次展开,可以有多次,像链式表一样. 代码内容: < ...
解决sublime3的标签页乱码（小方块）
在使用sublime3打开一个中文名的文件时,有可能显示的是小方块.这种情况很有可能在你新买的电脑上发生,这是因为现在的电脑的DPI比较高,即使你安装了ConvertToUTF8也还是不会正确显示文件 ...
js实现随机生成小方块
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
java 方块_哈工大java实验移动小方块
/*java第二次实验 * 移动小方块 */ import javax.swing.*; import java.awt.event.*; import java.awt.geom.*; import ...
使用canvas绘制小程序码
场景:使用小程序文档的API可以获取带参数的二维码和小程序码,但是小程序码中的图片默认都是小程序的头像(红框中的图片).现在我们需要替换里面的图片,然后将小程序码保存成一张图片存入相册. 1.获取带参 ...
html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...

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

用canvas实现小方块的音符跳动相关推荐

最新文章

热门文章