代碼一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球運(yùn)動</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;
? ? ? ? ? ? }
? ? ? ? }; //創(chuàng)建一個對象
function Draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
circle.DrawCircle(ctx);
? ? ? ? circle.CircleMove();
? ? ? ? circle.angle+=10;
? ? ? ? circle.a -= 0.01;//對象數(shù)值操作
? ? ? ? if(circle.alpha<=0){
? ? ? ? return;
? ? ? ? }
? ? ? ? setTimeout(Draw, 100);
}
Draw();
</script>
</html>
代碼二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小球運(yùn)動</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)//類實(shí)例化成對象
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>小球運(yùn)動</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)//類實(shí)例化成對象
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>
