Canvas 阿尔卑斯小悦球

周大胖子 · 发表于 2018-12-14 00:00:14

这里有一个被我忘掉的巨大的坑点： fillstyle='颜色' ；这句话如果没有 fill() 做支撑，则画不出来东西，因为他只是定义一个属性—— 胖爷居然忘掉了尴尬

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>鼠标移动产生动态效果</title>
<style>
*{
padding: 0;
margin:0;
}
body{
background: #000;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var myCanvas = document.getElementById('canvas');
var ctx = myCanvas.getContext("2d");
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
function Ball(x,y){
this.x= x; //圆心
this.y= y; //圆心
this.r = 30;
this.dx = parseInt( Math.random()*8-4 );
this.dy = parseInt( Math.random()*8-4 );
this.style='rgba('+parseInt( Math.random()*255 )+','+parseInt( Math.random()*255 )+','+parseInt( Math.random()*255 )+',0.8) ballArr.push(this);
}
Ball.prototype.render=function()
{
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
ctx.fillStyle = this.style; //在这有个错误的地方 fillstale 只是规定填充颜色，而fill()才是渲染这个动作
ctx.fill();
}
Ball.prototype.update=function()
{
this.x = this.x + this.dx ;
this.y = this.y + this.dy ;
this.r--;
if(this.r<=0){
this.godie();
}
}
Ball.prototype.godie = function()
{
for(var i =0; i<ballArr.length; i++){
if(ballArr[i]==this){
ballArr.splice(i,1);
}
}
}
var ballArr = [];
myCanvas.onmousemove= function(event){
var e = event || window.event;
var a = new Ball(e.clientX,e.clientY);
}
setInterval(function(){
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
for(var i = 0; i<ballArr.length; i++){
ballArr[i].render();
ballArr[i].update();
}
},20)
</script>
</body>
</html>

复制代码