js canvasによるアニメーション効果

注意すべき点は、canvasラベル自体にwidthとheight属性が付いていることです.この属性を設定すると、canvas座標系の幅と高さを直接変更することができますが、cssでは幅を設定します.canvas座標系を伸ばしただけで、座標値は変わらず、表示された画像も引き伸ばされます.

var canvas = document.getElementById("canvas");
var parti = [];
function loop()
{
    CreateParticles();
    UpdateParticles();
    KillParticles();
    DrawParticles();
}

function CreateParticles()
{
    var partis = {x:Math.random()*canvas.clientWidth, y:0 , color:"white", radius:2 + Math.random()* 5 ,speed:2+Math.random()*5};
    if(parti.length < 80)
    {
        parti.push(partis);
    }
}

function UpdateParticles()
{
    for(var i in parti)
    {
        parti[i].y += parti[i].speed;
    }
}

function KillParticles()
{
    for(var i in parti)
    {
        if(parti[i].y >= canvas.clientHeight)
        {
            parti[i].y = 0;
        }
    }
}

function DrawParticles()
{
    var contex = canvas.getContext("2d");
    contex.fillStyle = "black";
    contex.fillRect(0,0,canvas.clientWidth,canvas.clientHeight);
    for(var i in parti)
    {
        contex.beginPath();
        contex.arc(parti[i].x, parti[i].y,parti[i].radius,0,Math.PI * 2);
        contex.closePath();
        contex.fillStyle = parti[i].color;
        contex.fill();
    }
}

setInterval(loop,30);