javascript canvas animationの編集

Question

私は少し問題があります。私はからアニメーションを使用したいと思います： http://codepen.io/chuckeles/pen/mJeaNJ

主な質問、どのようにそれを編集し、その代わりにドットの、小さな画像があるでしょうか？どの部分を変更する必要がありますか？どこから始めたらいいのかわからないので、ちょっとしたガイダンスが必要です。ドットをイメージに変更するコードを編集する必要があります。助けやアドバイスをいただければ幸いです。ここ 全Javascriptコード：

// --- CANVAS --- 

var canvas = document.getElementById("bg"); 
var ctx = canvas.getContext("2d"); 

// --- UTILS --- 

// request frame 
var requestFrame = 
    window.requestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.msRequestAnimationFrame; 

// window resizing 
(window.onresize = function() { 
    // set new canvas size 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
})(); 

// --- STARS --- 

var Star = function(x, y) { 
    this.x = x || 0; 
    this.y = y || 0; 

    this.mx = 0; 
    this.my = 0; 

    this.distance = 0; 
    this.mult = Math.random() * 0.4 + 0.6; 
}; 

// --- GLOBALS --- 

// the star array 
var stars = []; 

// stars to remove from the array 
var starsToRemove = []; 

// create random stars 
for (var i = 0; i < 60; ++i) { 
    // pos 
    var x = Math.random() * canvas.width; 
    var y = Math.random() * canvas.height; 

    // create 
    stars.push(new Star(x, y)); 
} 

// --- SETUP --- 

// disable smoothing 
ctx.imageSmoothingEnabled = false; 

// --- MAIN LOOP --- 

// loop function 
var loop = function() { 

    // --- UPDATE --- 

    // create random stars 
    var chance = 0.2; 
    var asp = canvas.width/canvas.height; 
    if (Math.random() < chance) 
    stars.push(
     new Star(0, Math.random() * canvas.height) // left 
    ); 
    if (Math.random() < chance) 
    stars.push(
     new Star(canvas.width, Math.random() * canvas.height) // right 
    ); 
    if (Math.random() < chance * asp) 
    stars.push(
     new Star(Math.random() * canvas.width, 0) // top 
    ); 
    if (Math.random() < chance * asp) 
    stars.push(
     new Star(Math.random() * canvas.width, canvas.height) // botton 
    ); 

    // update stars 
    stars.forEach(function(star) { 
    // update motion 
    star.mx = -(star.x - canvas.width/2)/300; 
    star.my = -(star.y - canvas.height/2)/300; 

    // apply motion 
    star.x += star.mx * star.mult; 
    star.y += star.my * star.mult; 

    // update distance 
    star.distance = Math.sqrt(
     Math.pow((star.x - canvas.width/2), 2) + 
     Math.pow((star.y - canvas.height/2), 2) 
    ); 

    // remove if close to the center 
    if (star.distance < 40 * star.mult) 
     starsToRemove.push(star); 
    }); 

    // remove stars 
    starsToRemove.forEach(function(toRemove) { 
    stars.splice(stars.indexOf(toRemove), 1); 
    }); 
    starsToRemove = []; 

    // --- DRAW --- 

    // clear 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    // get image data 
    var data = ctx.getImageData(0, 0, canvas.width, canvas.height); 

    // for each star 
    stars.forEach(function(star) { 
     // get pos 
    var x = Math.floor(star.x); 
    var y = Math.floor(star.y); 

    // draw a pixel 
    var i = y * data.width + x; 
    data.data[i * 4 + 0] = 255; 
    data.data[i * 4 + 1] = 255; 
    data.data[i * 4 + 2] = 255; 

    // apply alpha based on distance 
    var a = (star.distance - 40 * star.mult)/(canvas.width/2 - 40 * star.mult); 
    data.data[i * 4 + 3] = 255 * a * star.mult; 
    }); 

    // put back 
    ctx.putImageData(data, 0, 0); 

    // new loop 
    requestFrame(loop); 

}; 

// start loop 
requestFrame(loop); 

Answer 1

あなたがコメントした後、それを編集したい場合があります：

// --- DRAW --- 

変更したいかもしれない方法を描画キャンバスがあります。たとえば、キャンバスのサイズで描かれたすべてのピクセルをクリアすることができます。

Mightsはキャンバスピクセルからそのサイズの配列を返します。

ctx.getImageData(0, 0, canvas.width, canvas.height); 

Mightsは、各画素（star）を描きます。

// for each star 
stars.forEach(function(star) { 
    // get pos 
    var x = Math.floor(star.x); 
    var y = Math.floor(star.y); 

    // draw a pixel 
    var i = y * data.width + x; 
    // change pixel color 
    data.data[i * 4 + 0] = 255;//Red = 255 
    data.data[i * 4 + 1] = 255;//Green = 255 
    data.data[i * 4 + 2] = 255;//Blue = 255 
    //^color (rgb) 

    // apply alpha based on distance 
    var a = (star.distance - 40 * star.mult)/(canvas.width/2 - 40 * star.mult); 
    data.data[i * 4 + 3] = 255 * a * star.mult; 
}); 
// put back 
ctx.putImageData(data, 0, 0); 
//^this line update the canvas pixels edited as above 

DOMメソッドを使用すると、キャンバス内のピクセルではなくspanまたはdivを描画できますが、パフォーマンスが悪いです。