推荐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 = canvas.getContext('2d')
console.log(ctx)
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
var ballArr = []
//新定义小球
function ball(x,y){
this.r = 10
this.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
// }
this.color = randerDom()
this.dx = parseInt(Math.random()*20)-5
this.dy = parseInt(Math.random()*20)-5
ballArr.push(this)
}
// 定义小球的更新方法
ball.prototype.update = function(){
this.x += this.dx
this.y += this.dy
// 让小球不超过canvas画布范围
if(this.x<this.r||this.x>canvas.width-this.r){
this.dx = -this.dx
}
if(this.y<this.r||this.y>canvas.height-this.r){
this.dy = -this.dy
}
}
// 定义小球的渲染方法
ball.prototype.render = function(){
console.log(this.color)
ctx.beginPath()
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)
ctx.fillStyle = this.color
ctx.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>