JavaScript+html5 canvas制作的百花齐放效果完整实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript+html5 canvas制作的百花齐放效果完整实例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2403字,纯文字阅读大概需要4分钟。
内容图文
![JavaScript+html5 canvas制作的百花齐放效果完整实例](/upload/InfoBanner/zyjiaocheng/355/1d5bed89893643328fbca200e880939d.jpg)
本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gray; box-shadow:0 0 15px 15px #494949 inset; margin-top:50px; margin-left:200px; } </style> </head> <body > <canvas id="canvas" width="1000px" height="500px"></canvas> <script type="text/javascript"> var dyl = {}; dyl.canvas = document.getElementById("canvas"); dyl.ctx = dyl.canvas.getContext("2d"); dyl.runTime = 0; dyl.colorList = "01234567890ABCDEFabcdef".split(""); dyl.colorListLength = dyl.colorList.length; dyl.arcList = null; /** * 得到16进制随机颜色值 */ dyl.getColor = function() { var color = "#"; for(var i=0; i<6; i++) { color += dyl.colorList[Math.floor(Math.random()*dyl.colorListLength)]; } return color; }; /** * 一个随机角度,随机初始速度的斜抛对象 */ var Arc = function(i) { // 设置自有属性 this.v = Math.round(Math.random()*100)+50; this.angle = Math.round(Math.random()*145) + 45; this.startTime = +new Date(); this._angle = this.angle/180*Math.PI; this.v_x = this.v*Math.cos(this._angle); this.v_y_start = this.v*Math.sin(this._angle); this.color = dyl.getColor(); this.x = 500; this.g = 250; this.y = 490; this.index = i; var _self = this; this.run = function() { var endTime = +new Date(); var timeSpan = (endTime - _self.startTime)/1000; var v_y_now = _self.v_y_start - 1/2*_self.g*Math.pow(timeSpan, 2); _self.x = _self.x +_self.v_x * timeSpan; _self.y = _self.y - (_self.v_y_start * timeSpan - 1/2*_self.g*Math.pow(timeSpan, 2)); return this; }; return this; }; /** * 全局绘制图像 */ dyl.draw = function() { var arcList = dyl.arcList; var ctx = dyl.ctx; dyl.runTime++; for(var i=0, length=arcList.length; i<length; i++) { var arc = arcList[i]; if(!arc) { continue; } arc.run(); ctx.save(); ctx.beginPath(); ctx.fillStyle = arc.color; ctx.arc(arc.x, arc.y, 2, 0, Math.PI*2); ctx.fill(); ctx.closePath(); ctx.restore(); } console.log(dyl.runTime); if(dyl.runTime >= 25) { setTimeout(dyl.init, 1050); } else { setTimeout(dyl.draw, 20); } }; /** * 初始化整个事件 */ dyl.init = function() { dyl.ctx.clearRect(0, 0, 1000, 500); dyl.arcList = []; dyl.runTime = 0; for(var i=0; i<100; i++) { dyl.arcList.push(new Arc(i)); } dyl.draw(); }; dyl.init(); </script> </body> </html>
更多关于js特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的JavaScript+html5 canvas制作的百花齐放效果完整实例全部内容,希望文章能够帮你解决JavaScript+html5 canvas制作的百花齐放效果完整实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。