代码一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球运动</title>
<style>
canvas{
border: 1px #000 solid
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="200"></canvas>
</div>
</body>
<script>
var canvas=document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
var circle={//定义一个对象
"r":255,
"g":0,
"b":0,
"a":1,
"r":10,
"x":10,
"y":100,
"angle":0,
DrawCircle: function (ctx) {
ctx.fillStyle = 'rgba(' + 255 + ',' + this.g + ',' + this.b + ',' + this.a + ')';
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 360, false);
ctx.fill();
ctx.closePath();
},
CircleMove: function () {
var scale = this.angle / 180 * Math.PI;
var dx = 8;
var dy = -14 * Math.cos(scale);
this.x += dx;
this.y += dy;
}
}; //创建一个对象
function Draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
circle.DrawCircle(ctx);
circle.CircleMove();
circle.angle+=10;
circle.a -= 0.01;//对象数值操作
if(circle.alpha<=0){
return;
}
setTimeout(Draw, 100);
}
Draw();
</script>
</html>
代码二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球运动</title>
<style>
canvas{
border: 1px #000 dashed
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="200"></canvas>
</div>
</body>
<script>
var canvas=document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
function particle(colorr, colorg, colorb, r, x, y, speed, angle, alpha) {
var obj = {//定义一个类
colorr: colorr,
colorg:colorg,
colorb:colorb,
r: r,
x: x,
y: y,
speed:speed,
angle: angle,
alpha: alpha,
draw: function (ctx) {
ctx.fillStyle = 'rgba(' + this.colorr + ',' + this.colorg + ',' + this.colorb + ',' + this.alpha + ')';
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 360, false);
ctx.fill();
ctx.closePath();
},
move: function () {
var scale = this.angle / 180 * Math.PI;
var dx = this.speed;
var dy = -14 * Math.cos(scale);
this.x += dx;
this.y += dy;
}
};
return obj;
}
var circle=particle(255,0,0,10, 10, 100, 8, 0, 1)//类实例化成对象
function Draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
circle.draw(ctx);
circle.move();
circle.angle+=10;
circle.alpha -= 0.01;
if(circle.alpha<=0){
return;
}
setTimeout(Draw, 100);
}
Draw();
</script>
</html>
代码三：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球运动</title>
<style>
canvas{
border: 1px #000 dashed
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="200"></canvas>
</div>
</body>
<script>
var canvas=document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
function particle(colorr, colorg, colorb, r, x, y, speed, angle, alpha) {
this.colorr=colorr,
this. colorg=colorg,
this.colorb=colorb,
this.r=r,
this.x=x,
this.y=y,
this.speed=speed,
this.angle=angle,
this.alpha=alpha,
this.draw=function (ctx) {
ctx.fillStyle = 'rgba(' + this.colorr + ',' + this.colorg + ',' + this.colorb + ',' + this.alpha + ')';
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 360, false);
ctx.fill();
ctx.closePath();
},
this.move=function () {
var scale = this.angle / 180 * Math.PI;
var dx = this.speed;
var dy = -14 * Math.cos(scale);
this.x += dx;
this.y += dy;
}
}
var circle=new particle(255,0,0,10, 10, 100, 8, 0, 1)//类实例化成对象
function Draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
circle.draw(ctx);
circle.move();
circle.angle+=10;
circle.alpha -= 0.01;
if(circle.alpha<=0){
return;
}
setTimeout(Draw, 100);
}
Draw();
</script>
</html>
