HTML5 canvas实现音乐喷泉效果 纯js代码模拟喷泉[js高阶]

今天web前端中文站给大家深化HTML5 canvas的高阶知识—通过模拟喷泉效果实例,让大家学习如何用纯js来实现喷泉颗粒散弹效果。

更多精彩内容请看web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

在学习之前,可以先了解下canvas的特性。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见:http://excanvas.sourceforge.net/。
<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进,目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。 参见:http://www.whatwg.org/specs/web-apps/current-work/

效果图

HTML5 canvas喷泉

HTML5 canvas喷泉

前端js代码

<!Doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
    </head>
    <body> 
    <script>
        var ctx = document.body.appendChild(
             document.createElement("canvas")).getContext('2d');
	var i, j, k, a = [], w = ctx.canvas.width = 1000, 
        h = ctx.canvas.height = 500, r = Math.random, p = Math.PI;
	setInterval(function(){
	     ctx.fillStyle = "rgba(0, 0, 0, .5)";
	     ctx.fillRect(0, 0, w, h);
	     i = 10;
	     while(i--){a.push({x:w/2,y:h/6,r:r()*3,c:"#fff",
                 t:0,vx:r()*10-5,vy:r()*-5})}
	     for(i = a.length-1;i >= 0;i--){
			k = a[i];
			ctx.fillStyle=k.c;
			ctx.beginPath();
			ctx.arc(k.x, k.y, k.r, 0, p*2)
			ctx.fill();
			k.x+=k.vx;
			k.y+=k.vy;
			k.vy+=.2;
			k.r -= .01;
			if(k.y>h){k.y=h;k.vy*=-.5;k.r+=.005;}
				k.r < 0 && a.splice(i, 1);
			}
	      }, 17);
        </script>
    </body>
</html>

在线演示

具体颗粒喷泉前端demo代码(纯JavaScript代码)见以下链接:

链接:点击下载? ? ? 密码:79m2

 

 

 

2
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到