你的位置:首页 > 网页设计

[网页设计]HTML5 Canvas彩色小球碰撞运动特效


脚本简介

HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效。
 

效果展示 http://hovertree.com/texiao/html5/39/
 
效果图如下:


代码如下:
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>HTML5 Canvas彩色小球碰撞运动特效 - 何问起</title>  <base target="_blank" />  <style>    #hovertreeball {      border: 1px dashed #999;      box-shadow: 0px 4px 40px #233;      background: black;    }    .hovertreeinfo{text-align:center;}    a{color:blue;}  </style></head><body>  <div class="hovertreeinfo" >    提示:可以点击按钮改变背景颜色<br />    <canvas id="hovertreeball" width="800" height="600"></canvas>  </div><script type="text/javascript">  var canvas = document.getElementById("ho"+"vertreeball");  var context = canvas.getContext("2d");  var maxWidth = canvas.width;  var maxHeight = canvas.height;  var colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]  //随机数  function random(min, max) {    return Math.floor(Math.random() * (max - min) + min)  }  //构造函数  function Ball() {    this.a = true;    this.b = true;    this.r = random(10, 30);    this.ballColor = { color: colors[Math.floor(Math.random() * colors.length)] }    this.vx = random(30, maxWidth - 30);    this.vy = random(30, maxHeight - 30);    this.ispeed = random(1, 10);    this.ispeed2 = random(1, 10);  }  // 面向对象  Ball.prototype.moveBall = function () {    context.beginPath();    if (this.a) {      this.vx += this.ispeed;      if (this.vx >= maxWidth - this.r) {        this.a = false;      }    } else {      this.vx -= this.ispeed;      if (this.vx <= this.r) {        this.a = true;      }    }    if (this.b) {      this.vy += this.ispeed2;      if (this.vy >= maxHeight - this.r) {        this.b = false;      }    } else {      this.vy -= this.ispeed2;      if (this.vy <= this.r) {        this.b = true;      }    }    context.fillStyle = this.ballColor.color;    context.arc(this.vx, this.vy, this.r, 0, Math.PI * 2, false);    context.fill();  }  var Aball = [];  for (var i = 0; i < 100; i++) {    Aball[i] = new Ball();  }  setInterval(function () {    context.clearRect(0, 0, canvas.width, canvas.height)    for (var i = 0; i < 100; i++) {      Aball[i].moveBall();    }  }, 30)  function hovertreecolor() {    if (canvas.style.backgroundColor != "white") {      canvas.style.backgroundColor = "white";    }    else {      canvas.style.backgroundColor = "black";    }  }</script><div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">  <button id="hovertreechange">改变背景颜色</button><p>适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等. 不支持IE8及以下浏览器。</p><p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a><a href="http://hovertree.com/h/bjaf/mll8cpr3.htm">代码说明</a></p></div>  <script>    document.getElementById("hover" + "treechange").addEventListener("click", hovertreecolor)  </script></body></html>

转自:http://hovertree.com/h/bjaf/mll8cpr3.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html