HTML5的Canvas實現小圓點在螢幕內跑動
阿新 • • 發佈：2019-01-31
點選螢幕可以增加小圓點個數，效果如圖：
完整程式碼如下，複製到HTML檔案，開啟即可執行。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title id="title">Hover</title> <!-- <link href="css/css.css" rel="stylesheet"> --> <style> /*@import url(http://fonts.googleapis.com/css?family=Righteous);*/ body { width: 100%; margin: 0; overflow: hidden; cursor: move; background: black; height: 100%; } </style> </head> <body> <canvas id='canvas'></canvas> <script> window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; }) (); c = document.getElementById('canvas'), $ = c.getContext('2d'); //設定畫布的寬高 var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; //噴射點座標 sx = w / 2; sy = h / 2; //放置圓點物件的陣列 var circles = []; //滑鼠的位置 var mouse = { x: 0, y: 0 }; //初始速度 var vel = 10; //建立新的圓點並加入陣列 function createCircle() { circles.push({ x: sx, y: sy, v: { x: vel * Math.random(), y: vel * Math.random() } }); } //清除畫布內容 function clear() { $.fillStyle = 'black'; $.fillRect(0,0,w,h); } //畫圓點 function drawCircle() { clear(); for (var i in circles) { if (circles[i].x < 5 || w - circles[i].x < 5) { circles[i].v.x *= -1; circles[i].v.y -= 1; } if (circles[i].y < 5 || h - circles[i].y < 5) { circles[i].v.y *= -1; circles[i].v.x -= 1; } circles[i].x += circles[i].v.x; circles[i].y += circles[i].v.y; $.fillStyle = 'red'; $.beginPath(); $.arc(circles[i].x, circles[i].y, 20, 0, Math.PI * 2, true); $.closePath(); $.fill(); } } //設定動畫的回撥函式，使動畫持續播放 function updateCanvas() { requestAnimationFrame(updateCanvas), drawCircle(); } window.addEventListener('mousedown',createCircle); //頁面載入後自行產生一個圓點 createCircle(); //觸發迴圈回撥，動畫即可持續進行 updateCanvas(); </script> </body> </html>