Canvas放置反弹效果随机图形(实例)
需积分: 0 144 浏览量
2020-12-12
12:56:46
上传
评论
收藏 30KB PDF 举报
Canvas放置反弹效果随机图形放置反弹效果随机图形(实例实例)
Canvas放置反弹效果随机图形放置反弹效果随机图形(实例实例)
var raf;
var arror = [];
var running = false;
//绘制圆形
function createBall() {
return {
x: 0,
y: 0,
vx: 10-Math.random()*10,
vy: 10-Math.random()*10,
radius: 25,
color:"red",
draw: function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
}
}
//绘制正方形
function createSquare() {
return {
x: 0,
y: 0,
vx: 10-Math.random()*10,
vy: 10-Math.random()*10,
color:"red",
draw: function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y,30, 30);
ctx.closePath();
}
}
}
//绘制五角星
function createStar() {
return {
x: 0,
y: 0,
vx: 10-Math.random()*10,
vy: 10-Math.random()*10,
color:"red",
draw: function() {
ctx.font = "24px serif";
ctx.textBaseline = "hanging";
ctx.fillStyle=this.color;
ctx.fillText("五角星",this.x, this.y);
}
}
}
//绘制三角形
function createTriangle() {
return {
x: 0,
y: 0,
vx: 10-Math.random()*10,
vy: 10-Math.random()*10,
color:"red",
draw: function() {
ctx.beginPath();
ctx.moveTo(this.x,this.y);
ctx.lineTo(this.x+25,this.y+25);
ctx.lineTo(this.x+25,this.y-25);
ctx.fillStyle=this.color;
ctx.fill();
}
}
}
//清除
function clear() {
ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
//判断图形坐标是否超出画布范围
function draw() {
clear();
arror.forEach(function(ball, i){
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
资源评论
