HTML5 Canvas原子球粒子运动效果

2024-09-05 12:18:55

字体：大中小

来源：转载

供稿：网友

地地道道的HTML5 Canvas效果，绘制实现逼真的原子球链式反应效果，动画演示版，网上朋友写的，再此表示羡慕。喜欢对大家学习HTML5有所帮助。

<!doctype html><html><head><meta charset="utf-8"><title>Canves-Ball</title><style>aside, footer, header, nav, section{display: block;}body{background-color: #bbb;color: #383838;}header{padding-bottom: 10px;}#canvas{background-color: #000000;}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><script >if (!window.requestAnimationFrame) {  window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||                                  window.mozRequestAnimationFrame ||                                  window.msRequestAnimationFrame ||                                  window.oRequestAnimationFrame ||                                  function (callback) {                                    return window.setTimeout(callback, 17 /*~ 1000/60*/);                                  });}if (!window.cancelRequestAnimationFrame) {  window.cancelRequestAnimationFrame = (window.cancelAnimationFrame ||                                        window.webkitCancelRequestAnimationFrame ||                                        window.mozCancelRequestAnimationFrame ||                                        window.msCancelRequestAnimationFrame ||                                        window.oCancelRequestAnimationFrame ||                                        window.clearTimeout);}window.utils = {};window.utils.captureMouse = function (element) {var mouse = {x: 0, y: 0, event: null},      body_scrollLeft = document.body.scrollLeft,      element_scrollLeft = document.documentElement.scrollLeft,      body_scrollTop = document.body.scrollTop,      element_scrollTop = document.documentElement.scrollTop,      offsetLeft = element.offsetLeft,      offsetTop = element.offsetTop;element.addEventListener('mousemove', function (event) {    var x, y;    if (event.pageX || event.pageY) {      x = event.pageX;      y = event.pageY;    } else {      x = event.clientX + body_scrollLeft + element_scrollLeft;      y = event.clientY + body_scrollTop + element_scrollTop;    }    x -= offsetLeft;    y -= offsetTop;    mouse.x = x;    mouse.y = y;    mouse.event = event;  }, false);  return mouse;};window.utils.captureTouch = function (element) {  var touch = {x: null, y: null, isPressed: false, event: null},      body_scrollLeft = document.body.scrollLeft,      element_scrollLeft = document.documentElement.scrollLeft,      body_scrollTop = document.body.scrollTop,      element_scrollTop = document.documentElement.scrollTop,      offsetLeft = element.offsetLeft,      offsetTop = element.offsetTop;  element.addEventListener('touchstart', function (event) {    touch.isPressed = true;    touch.event = event;  }, false);  element.addEventListener('touchend', function (event) {    touch.isPressed = false;    touch.x = null;    touch.y = null;    touch.event = event;  }, false);  element.addEventListener('touchmove', function (event) {    var x, y,        touch_event = event.touches[0]; //first touch    if (touch_event.pageX || touch_event.pageY) {      x = touch_event.pageX;      y = touch_event.pageY;    } else {      x = touch_event.clientX + body_scrollLeft + element_scrollLeft;      y = touch_event.clientY + body_scrollTop + element_scrollTop;    }    x -= offsetLeft;    y -= offsetTop;    touch.x = x;    touch.y = y;    touch.event = event;  }, false);    return touch;};window.utils.parseColor = function (color, toNumber) {  if (toNumber === true) {    if (typeof color === 'number') {      return (color | 0); //chop off decimal    }    if (typeof color === 'string' && color[0] === '#') {      color = color.slice(1);    }    return window.parseInt(color, 16);  } else {    if (typeof color === 'number') {      color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad    }    return color;  }};window.utils.colorToRGB = function (color, alpha) {  // http://www.codefans.net  if (typeof color === 'string' && color[0] === '#') {    color = window.parseInt(color.slice(1), 16);  }  alpha = (alpha === undefined) ? 1 : alpha;  //parse hex values  var r = color >> 16 & 0xff,      g = color >> 8 & 0xff,      b = color & 0xff,      a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha);  //only use 'rgba' if needed  if (a === 1) {    return "rgb("+ r +","+ g +","+ b +")";  } else {    return "rgba("+ r +","+ g +","+ b +","+ a +")";  }};window.utils.containsPoint = function (rect, x, y) {  return !(x < rect.x ||           x > rect.x + rect.width ||           y < rect.y ||           y > rect.y + rect.height);};window.utils.intersects = function (rectA, rectB) {  return !(rectA.x + rectA.width < rectB.x ||           rectB.x + rectB.width < rectA.x ||           rectA.y + rectA.height < rectB.y ||           rectB.y + rectB.height < rectA.y);};//###[ball.js]###function Ball (radius, color) {  if (radius === undefined) { radius = 40; }  if (color === undefined) { color = "#ff0000"; }  this.x = 0;  this.y = 0;  this.radius = radius;  this.vx = 0;  this.vy = 0;  this.rotation = 0;  this.scaleX = 1;  this.scaleY = 1;  this.color = utils.parseColor(color);  this.lineWidth = 1;}Ball.prototype.draw = function (context) {  context.save();  context.translate(this.x, this.y);  context.rotate(this.rotation);  context.scale(this.scaleX, this.scaleY);  context.lineWidth = this.lineWidth;  context.fillStyle = this.color;  context.beginPath();  //x, y, radius, start_angle, end_angle, anti-clockwise  context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);  context.closePath();  context.fill();  if (this.lineWidth > 0) {    context.stroke();  }  context.restore();};Ball.prototype.getBounds = function () {  return {    x: this.x - this.radius,    y: this.y - this.radius,    width: this.radius * 2,    height: this.radius * 2  };};window.onload = function() {  var canvas = document.getElementById('canvas'),  context = canvas.getContext('2d'),  particles = [],  numParticles = 30,  minDist = 100,  springAmount = 0.0005;  for (var size, particle, i = 0; i < numParticles; i++) {    size = Math.random() * 10 + 2;    particle = new Ball(size, "#ffffff");    particle.x = Math.random() * canvas.width;    particle.y = Math.random() * canvas.height;    particle.vx = Math.random() * 6 - 3;    particle.vy = Math.random() * 6 - 3;    particle.mass = size;    particles.push(particle);}function spring(partA, partB) {    var dx = partB.x - partA.x,    dy = partB.y - partA.y,    dist = Math.sqrt(dx * dx + dy * dy);    if (dist < minDist) {      var alpha = 1 - dist / minDist;      context.strokeStyle = utils.colorToRGB("#ffffff", alpha);      context.beginPath();      context.moveTo(partA.x, partA.y);      context.lineTo(partB.x, partB.y);      context.stroke();      var ax = dx * springAmount,      ay = dy * springAmount;      partA.vx += ax / partA.mass;      partA.vy += ay / partA.mass;      partB.vx -= ax / partB.mass;      partB.vy -= ay / partB.mass;    }  }function move(partA, i) {    partA.x += partA.vx;    partA.y += partA.vy;    if (partA.x > canvas.width) {      partA.x = 0;    } else if (partA.x < 0) {      partA.x = canvas.width;    }    if (partA.y > canvas.height) {      partA.y = 0;    } else if (partA.y < 0) {      partA.y = canvas.height;    }    for (var partB, j = i + 1; j < numParticles; j++) {      partB = particles[j];      spring(partA, partB);    }}function draw(particle) {    particle.draw(context);  }  (function drawFrame() {    window.requestAnimationFrame(drawFrame, canvas);    context.clearRect(0, 0, canvas.width, canvas.height);    particles.forEach(move);    particles.forEach(draw);  } ());};</script></body></html>

上一篇：CSS3 html5+jQuery图片放大镜效果

下一篇：html5实现的简单进度条效果