canvas–碰撞互换颜色

由前端开发者 · 2018年11月6日15:09:16

摘要：html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale-1.0" /> <title></title> <link rel="stylesheet" type="text/<a href="https://www.rokub.com/category/css" title="css">css</a>" href="" /> <style type="text/<a href="https://www.rokub.com/category/css" title="css">css</a>"> 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> </<a href="https://www.rokub.com/category/html" title="html">html</a>> <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–碰撞互换颜色》

» 本文链接地址：https://www.rokub.com/8828.html

» 您也可以订阅本站：https://www.rokub.com