html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>></p> <p> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width,initial-scale-1.0" /><br /> <title></title><br /> <link rel="stylesheet" type="text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>" href="" /><br /> <style type="text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>"><br /> canvas {<br /> border: 1px solid #ff2389;<br /> }<br /> </style><br /> </head></p> <p> <body><br /> <div class="control"><br /> <input type="button" name="" id="startBtn" value="开始" /><br /> </div><br /> <canvas id="myCanvas" width="750" height="400"></canvas><br /> </body></p> <p></<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>></p> <p><script type="text/javascript"><br /> var myCanvas = document.querySelector("#myCanvas");<br /> context = myCanvas.getContext("2d");</p> <p>startBtn = document.getElementById("startBtn");</p> <p>function ball(x, y, movex, movey, radius, fillStyle, strokeStyle) {<br /> this.x = x;<br /> this.y = y;<br /> this.movex = movex;<br /> this.movey = movey;<br /> this.radius = radius;<br /> this.fillStyle = fillStyle;<br /> this.strokeStyle = strokeStyle;<br /> }<br /> function ran(){<br /> return Math.random()*3;<br /> }<br /> var ball1 = new ball(75, 25, ran(), ran(), 25, ‘rgb(239,11,11)’, ‘rgb(10,37,247)’);<br /> var ball2 = new ball(120, 230, -ran(), ran(), 25, ‘rgb(2,11,111)’, ‘rgb(10,35,217)’);<br /> var ball3 = new ball(300, 360, ran(), -ran(), 25, ‘rgb(79,11,191)’, ‘rgb(100,37,207)’);<br /> var ball4 = new ball(500, 300, -ran(), -ran(), 25, ‘rgb(219,11,121)’, ‘rgb(88,37,247)’);<br /> disDatas = [ball1, ball2, ball3, ball4];</p> <p>function draw() {<br /> var disc = null;<br /> for(var i = 0; i < disDatas.length; i++) {<br /> disc = disDatas[i];<br /> // context.save();<br /> context.beginPath();<br /> context.shadowColor="black";<br /> context.shadowBlur=20;<br /> context.shadowOffsetX=10;<br /> context.shadowOffsetY=10;<br /> context.globalAlpha=0.5;<br /> context.arc(disc.x, disc.y, disc.radius, 0, Math.PI * 2, false);<br /> context.strokeStyle = disc.strokeStyle;<br /> context.fillStyle = disc.fillStyle;<br /> context.fill();<br /> context.stroke();<br /> // context.restore();<br /> }<br /> }</p> <p>function update() {<br /> var disc = null;<br /> for(var i = 0; i < disDatas.length; i++) {<br /> disc = disDatas[i];<br /> disc.x += disc.movex;<br /> disc.y += disc.movey;<br /> if(disc.x + disc.radius > myCanvas.width || disc.x – disc.radius < 0) {<br /> disc.movex = -disc.movex;<br /> }<br /> if(disc.y + disc.radius > myCanvas.height || disc.y – disc.radius < 0) {<br /> disc.movey = -disc.movey;<br /> }<br /> hit(disc);<br /> }<br /> }</p> <p>function hit(ballobj) {<br /> for(var i = 0; i < disDatas.length; i++) {<br /> if(ballobj == disDatas[i]) {<br /> // console.log("1")<br /> return;<br /> } else {<br /> 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));<br /> if(d < ballobj.radius + disDatas[i].radius) {<br /> var zj=ballobj.fillStyle;<br /> ballobj.fillStyle=disDatas[i].fillStyle;<br /> disDatas[i].fillStyle=zj;<br /> ballobj.movex = -ballobj.movex;<br /> ballobj.movey = -ballobj.movey;<br /> disDatas[i].movex=-disDatas[i].movex;<br /> disDatas[i].movey=-disDatas[i].movey;<br /> }<br /> }<br /> }<br /> }</p> <p>var flag = true;<br /> startBtn.onclick = function() {<br /> flag = flag ? false : true;<br /> if(flag) {<br /> startBtn.value = "暂停";<br /> } else {<br /> startBtn.value = "开始";<br /> window.requestNextAnimationFrame(animation);<br /> }<br /> console.log(disDatas);<br /> window.requestNextAnimationFrame(animation);<br /> }</p> <p>function animation() {<br /> if(!flag) {<br /> context.clearRect(0, 0, myCanvas.width, myCanvas.height);<br /> draw();<br /> update();<br /> window.requestNextAnimationFrame(animation);<br /> // flag=false;<br /> }<br /> }</p> <p>window.requestNextAnimationFrame =<br /> (function () {<br /> var originalWebkitRequestAnimationFrame = undefined,<br /> wrapper = undefined,<br /> callback = undefined,<br /> geckoVersion = 0,<br /> userAgent = navigator.userAgent,<br /> index = 0,<br /> self = this;</p> <p> if (window.webkitRequestAnimationFrame) { </p> <p> wrapper = function (time) {<br /> if (time === undefined) {<br /> time = +new Date();<br /> }<br /> self.callback(time);<br /> };</p> <p> originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame; </p> <p> window.webkitRequestAnimationFrame = function (callback, element) {<br /> self.callback = callback;</p> <p> originalWebkitRequestAnimationFrame(wrapper, element);<br /> }<br /> }</p> <p> if (window.mozRequestAnimationFrame) { </p> <p> index = userAgent.indexOf(‘rv:’);</p> <p> if (userAgent.indexOf(‘Gecko’) != -1) {<br /> geckoVersion = userAgent.substr(index + 3, 3);</p> <p> if (geckoVersion === ‘2.0’) {<br /> window.mozRequestAnimationFrame = undefined;<br /> }<br /> }<br /> }</p> <p> return window.requestAnimationFrame ||<br /> window.webkitRequestAnimationFrame ||<br /> window.mozRequestAnimationFrame ||<br /> window.oRequestAnimationFrame ||<br /> window.msRequestAnimationFrame ||</p> <p> function (callback, element) {<br /> var start,<br /> finish;</p> <p> window.setTimeout( function () {<br /> start = +new Date();<br /> callback(start);<br /> finish = +new Date();</p> <p> self.timeout = 1000 / 60 – (finish – start);</p> <p> }, self.timeout);<br /> };<br /> }<br /> )<br /> ();<br /> </script><br /> » 本文来自：前端开发者 » 《canvas–碰撞互换颜色》 » 本文链接地址：https://www.rokub.com/8828.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册