Canvas放置反弹效果随机图形(实例)
创新互联从2013年成立，先为召陵等服务建站，召陵等地企业，进行企业商务咨询服务。为召陵企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
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) {
ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
});
raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener('click',function(e){
if (!running) {
raf = window.requestAnimationFrame(draw);
running = true;
}
var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"];
var Graphics = ["Round","Square","Star","Triangle"];
var typexz=Graphics[Math.floor(Math.random()*4)];
var ball;
switch(typexz){
case "Round":
ball = createBall();
break;
case "Square":
ball = createSquare();
break;
case "Star":
ball = createStar();
break;
case "Triangle":
ball = createTriangle();
break;
}
ball.x = e.clientX;
ball.y = e.clientY;
ball.color = colorarr[Math.floor(Math.random() * 10 + 3)];
arror.push(ball);
});
draw();
document.addEventListener('keydown',function (e) {
if(e.keyCode==32){
event.preventDefault();
window.cancelAnimationFrame(raf);
running = false;
}
})以上这篇Canvas放置反弹效果随机图形(实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。
网站名称：Canvas放置反弹效果随机图形(实例)
新闻来源：
http://www.cdkjz.cn/article/joihhs.html
