canvas小球碰壁效果
阿新 • • 發佈：2018-06-02
ani 部落 script AS java nbsp width dot scrip
分享一段代碼實例，它利用canvas實現了小球碰壁效果。
代碼實例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas { border:2px dotted #ccc; } </style> </head> <body> <canvas id="canvas" width="550" height="450"></canvas> <script type="text/javascript"> var canvas = document.getElementById(‘canvas‘); var ctx = canvas.getContext(‘2d‘); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: ‘blue‘, draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } }; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height|| ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw); } canvas.addEventListener(‘mouseover‘, function(e) { raf = window.requestAnimationFrame(draw); }); canvas.addEventListener("mouseout", function(e) { window.cancelAnimationFrame(raf); }); ball.draw(); </script> </body> </html>
轉載地址：canvas小球碰壁效果一文。
涉及知識：canvas教程
canvas小球碰壁效果