html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码

特效描述：html5 canvas 画布 圆球弹跳动画。html5 跳动的球体

代码结构

1. HTML代码

Untitled Document

body {

margin: 0px;

}

var imageCanvas;

var maskCanvas;

var imageContext;

var maskContext;

var frameCount = 0;

var nextFrames = 0;

var maskX = 225;

var maskY = 160;

var maskSpeedX = 0;

var maskSpeedY = 0;

var MASK_R = 75;

var CANVAS_WIDTH = 500;

var CANVAS_HEIGHT = 320;

//ߵ:http://caochunhui.taobao.com

function pageInit() {

imageCanvas = document.createElement("canvas");

imageCanvas.width = CANVAS_WIDTH;

imageCanvas.height = CANVAS_HEIGHT;

document.body.appendChild(imageCanvas);

imageCanvas.style.position = "absolute";

imageContext = imageCanvas.getContext("2d");

var img = new Image();

img.onload = function () {

imageContext.drawImage(img, 0, 0);

}

img.src = "mn.jpg";

maskCanvas = document.createElement("canvas");

maskCanvas.width = CANVAS_WIDTH;

maskCanvas.height = CANVAS_HEIGHT;

document.body.appendChild(maskCanvas);

maskCanvas.style.position = "absolute";

maskContext = maskCanvas.getContext("2d");

resetSpeed();

setInterval(moveMask, 20);

}

function resetSpeed() {

maskSpeedX = Math.random() * 10 - 5;

maskSpeedY = Math.random() * 10 - 5;

resetNextFrames();

}

function resetNextFrames() {

nextFrames = Math.random() * 125 + 25;

}

function moveMask() {

maskContext.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

maskContext.globalCompositeOperation = "source-over";

maskContext.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

maskContext.globalCompositeOperation = "destination-out";

maskContext.beginPath();

maskContext.arc(maskX, maskY, MASK_R, 0, Math.PI * 2, true);

maskContext.fill();

maskX += maskSpeedX;

maskY += maskSpeedY;

if (maskX >= CANVAS_WIDTH - MASK_R) {

maskSpeedX = -Math.abs(maskSpeedX);

}

if (maskX <= MASK_R) {

maskSpeedX = Math.abs(maskSpeedX);

}

if (maskY >= CANVAS_HEIGHT - MASK_R) {

maskSpeedY = -Math.abs(maskSpeedY);

}

if (maskY <= MASK_R) {

maskSpeedY = Math.abs(maskSpeedY);

}

frameCount++;

if (frameCount > nextFrames) {

frameCount = 0;

resetSpeed();

}

}