1
在當下畫布繪製15個不同速度和大小的圈子從ltr移動。當他們中的一個離開窗口時,它將被設置爲開始。問題是帆布畫圈之間的線,我不知道爲什麼?任何人都可以幫忙嗎?爲什麼畫布在圓弧(圓弧)之間畫線?
window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
var mp = 15; //max particles
var particles = [];
//var rotate = 180;
reqAnimFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
for (var i = 0; i < mp; i++)
{
particles.push({
x: Math.floor(Math.random()*W), //x-coordinate
y: Math.floor(Math.random()*H), //y-coordinate
d: Math.floor(Math.random()*(mp - 1) + 1), //density
r: Math.floor(Math.random()*(70 - 10) + 10) //radius
})
}
function animate() {
reqAnimFrame(animate);
for (var i = 0; i < mp; i++)
{
var p = particles[i];
p.x += p.d;
if(p.x >= W){
p.x = -300;
p.y = Math.floor(Math.random()*H);
}
draw();
}
}
function draw() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(0,204,142,1";
ctx.beginPath();
for (var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false);
//ctx.moveTo(p.x,p.y);
//ctx.lineTo(p.x + 150, p.y + (-180));
//ctx.lineTo(p.x + 300, p.y);
}
ctx.stroke();
}
animate();
};//onload function