html 代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale-1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
canvas {
border: 1px solid #ff2389;
}
</style>
</head>
<body>
<div class="control">
<input type="button" name="" id="startBtn" value="开始" />
</div>
<canvas id="myCanvas" width="750" height="400"></canvas>
</body>
</html>
<script type="text/javascript">
var myCanvas = document.querySelector("#myCanvas");
context = myCanvas.getContext("2d");
startBtn = document.getElementById("startBtn");
function ball(x, y, movex, movey, radius, fillStyle, strokeStyle) {
this.x = x;
this.y = y;
this.movex = movex;
this.movey = movey;
this.radius = radius;
this.fillStyle = fillStyle;
this.strokeStyle = strokeStyle;
}
function ran(){
return Math.random()*3;
}
var ball1 = new ball(75, 25, ran(), ran(), 25, ‘rgb(239,11,11)’, ‘rgb(10,37,247)’);
var ball2 = new ball(120, 230, -ran(), ran(), 25, ‘rgb(2,11,111)’, ‘rgb(10,35,217)’);
var ball3 = new ball(300, 360, ran(), -ran(), 25, ‘rgb(79,11,191)’, ‘rgb(100,37,207)’);
var ball4 = new ball(500, 300, -ran(), -ran(), 25, ‘rgb(219,11,121)’, ‘rgb(88,37,247)’);
disDatas = [ball1, ball2, ball3, ball4];
function draw() {
var disc = null;
for(var i = 0; i < disDatas.length; i++) {
disc = disDatas[i];
// context.save();
context.beginPath();
context.shadowColor="black";
context.shadowBlur=20;
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.globalAlpha=0.5;
context.arc(disc.x, disc.y, disc.radius, 0, Math.PI * 2, false);
context.strokeStyle = disc.strokeStyle;
context.fillStyle = disc.fillStyle;
context.fill();
context.stroke();
// context.restore();
}
}
function update() {
var disc = null;
for(var i = 0; i < disDatas.length; i++) {
disc = disDatas[i];
disc.x += disc.movex;
disc.y += disc.movey;
if(disc.x + disc.radius > myCanvas.width || disc.x – disc.radius < 0) {
disc.movex = -disc.movex;
}
if(disc.y + disc.radius > myCanvas.height || disc.y – disc.radius < 0) {
disc.movey = -disc.movey;
}
hit(disc);
}
}
function hit(ballobj) {
for(var i = 0; i < disDatas.length; i++) {
if(ballobj == disDatas[i]) {
// console.log("1")
return;
} else {
var d = Math.sqrt(Math.abs(ballobj.x – disDatas[i].x) * Math.abs(ballobj.x – disDatas[i].x) + Math.abs(ballobj.y – disDatas[i].y) * Math.abs(ballobj.y – disDatas[i].y));
if(d < ballobj.radius + disDatas[i].radius) {
var zj=ballobj.fillStyle;
ballobj.fillStyle=disDatas[i].fillStyle;
disDatas[i].fillStyle=zj;
ballobj.movex = -ballobj.movex;
ballobj.movey = -ballobj.movey;
disDatas[i].movex=-disDatas[i].movex;
disDatas[i].movey=-disDatas[i].movey;
}
}
}
}
var flag = true;
startBtn.onclick = function() {
flag = flag ? false : true;
if(flag) {
startBtn.value = "暂停";
} else {
startBtn.value = "开始";
window.requestNextAnimationFrame(animation);
}
console.log(disDatas);
window.requestNextAnimationFrame(animation);
}
function animation() {
if(!flag) {
context.clearRect(0, 0, myCanvas.width, myCanvas.height);
draw();
update();
window.requestNextAnimationFrame(animation);
// flag=false;
}
}
window.requestNextAnimationFrame =
(function () {
var originalWebkitRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = 0,
userAgent = navigator.userAgent,
index = 0,
self = this;
if (window.webkitRequestAnimationFrame) {
wrapper = function (time) {
if (time === undefined) {
time = +new Date();
}
self.callback(time);
};
originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;
window.webkitRequestAnimationFrame = function (callback, element) {
self.callback = callback;
originalWebkitRequestAnimationFrame(wrapper, element);
}
}
if (window.mozRequestAnimationFrame) {
index = userAgent.indexOf(‘rv:’);
if (userAgent.indexOf(‘Gecko’) != -1) {
geckoVersion = userAgent.substr(index + 3, 3);
if (geckoVersion === ‘2.0’) {
window.mozRequestAnimationFrame = undefined;
}
}
}
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback, element) {
var start,
finish;
window.setTimeout( function () {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000 / 60 – (finish – start);
}, self.timeout);
};
}
)
();
</script>
评论前必须登录!
注册