canvas-缤纷小球
生活随笔
收集整理的這篇文章主要介紹了
canvas-缤纷小球
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
思路:獲取鼠標的位置,畫球;每畫一個調(diào)整位置和大小這些…
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {display: grid;place-items: center;width: 100%;height: 100vh;}canvas {border: 1px solid skyblue;}</style> </head><body><div><canvas width="600" height="600" id="myCanvas"></canvas></div><script>let myCanvas = document.getElementById("myCanvas");let ctx = myCanvas.getContext("2d");//球類function Ball(x, y, r, color, dx, dy) {this.x = x;this.y = y;this.r = r;this.color = getRandom();this.dx = parseInt(Math.random() * 10) - 5;this.dy = parseInt(Math.random() * 10) - 5;ballArr.push(this)}// // 渲染小球// Ball.prototype.render = function() {// console.log(this.color, this.x, this.y, this.r)// ctx.beginPath();// ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);// ctx.fillStyle = this.color;// ctx.fill()// };// Ball.prototype.update = function() {// //小球的運動// this.x += this.dx;// this.y += this.dy;// this.r -= 0.4;// if (this.r < 0) {// this.remove()// }// }// Ball.prototype.remove = function() {// for (let i = 0; i < ballArr.length; i++) {// if (ballArr[i] == this) {// ballArr.splice(i, 1)// }// }// }Ball.prototype = {constructor: Ball,// 渲染小球render() {console.log(this.color, this.x, this.y, this.r)ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);ctx.fillStyle = this.color;ctx.fill()},//小球的運動update() {this.x += this.dx;this.y += this.dy;this.r -= 0.4;if (this.r < 0) {this.remove()}},// 移除remove() {for (let i = 0; i < ballArr.length; i++) {if (ballArr[i] == this) {ballArr.splice(i, 1)}}}}// 設置鼠標監(jiān)聽myCanvas.addEventListener('mousemove', function(event) {// console.log(event)new Ball(event.offsetX, event.offsetY, 50)})// 維護小球的數(shù)組let ballArr = []// 定時器進行更新h和動畫渲染setInterval(function() {ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)// console.log(ballArr)for (let i = 0; i < ballArr.length; i++) {ballArr[i].render()ballArr[i].update()}}, 50)// 隨機顏色function getRandom() {let allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";let allTypeArr = allType.split(",");let color = "#";for (let i = 0; i < 6; i++) {let random = parseInt(Math.random() * allTypeArr.length);color += allTypeArr[random]}return color;}</script> </body></html>總結(jié)
以上是生活随笔為你收集整理的canvas-缤纷小球的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 少年Pi的奇幻漂流-我们的后台自动化发布
- 下一篇： UEFI应用与编程--Dump ALC6