推荐canvas api文档：
MDN-canvas
<!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>*{margin:0;padding:0;}html,body{width: 100%;height: 100%;}canvas{width:100%;height:100%;background:#333;/* padding:50px; *//* margin:15px auto; */}</style>
</head>
<body><canvas id='canvas'>浏览器不支持canvas,请先升级浏览器</canvas><script>// 有个小问题，为什么随机生成的小球假如在边界就会一直在边界跳动var canvas = document.querySelector('#canvas')var ctx = Context('2d')console.log(ctx)canvas.width = document.documentElement.clientWidthcanvas.height = document.documentElement.clientHeightvar ballArr = []//新定义小球function ball(x,y){this.r = 10this.x = parseInt((Math.random()*document.documentElement.clientWidth))// if(this.x < this.r){// this.x += this.r*2// }this.y = parseInt((Math.random()*document.documentElement.clientHeight))// if(this.y < this.r){// this.y += this.r*2// }lor = randerDom()this.dx = parseInt(Math.random()*20)-5this.dy = parseInt(Math.random()*20)-5ballArr.push(this)}// 定义小球的更新方法ball.prototype.update = function(){this.x += this.dxthis.y += this.dy// 让小球不超过canvas画布范围if(this.x&his.x>canvas.width-this.r){this.dx = -this.dx}if(this.y&his.y>canvas.height-this.r){this.dy = -this.dy}}// 定义小球的渲染方法der = function(){console.lor)ctx.beginPath()ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)ctx.fillStyle = lorctx.fill()}// 随机颜色function randerDom(){let str = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'let strArr = str.split(',')let colorFul = '#'for(var i=0;i<6;i++){colorFul += strArr[parseInt(Math.floor(Math.random()*strArr.length))]}return colorFul}var i;for(var i=0;i<20;i++){new ball()}// console.log(ball.prototype)// for(i=0;i<ballArr.length-1;i++){// console.log(ballArr[i].x,ballArr[i].y)// ballArr[i].update()// ballArr[i].render()// }// 定时器来更新小球的位置setInterval(function(){ctx.clearRect(0,0,canvas.width,canvas.height)// console.log(1)// console.log(randerDom())for(i=0;i<ballArr.length;i++){console.log(ballArr[i])ballArr[i].update()ballArr[i].render()}},100)</script>
</body>
</html>
本文发布于:2024-01-27 20:05:18，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063571182352.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
