html 代码
- <!DOCTYPE html>
- <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>
canvas
评论
1
喜欢
3
赞
2
评论 ( 1 )
走你
最新评论
来源: http://www.qdfuns.com/article/35777/e168e4fdad1451ac39408543b9ae305b.html