來自sprite的canvas new Image（）

Question

我編寫了一個腳本，使用來自http://www.clips.ua.ac.be/pages/pattern-canvas的canvas.js為一些圖像制作動畫。

但是，因為我的腳本試圖在頁面加載時加載大約20個圖像，所以它最終運行需要至少6秒，我想通過使用精靈來解決這個問題。

我想知道如何從我的精靈圖像中獲取一個新的Image()對象（類似於new Image(xoffset, yoffset, width, height) ）。

目前我正在嘗試這個：

images = [];

images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 0, 0,   {  width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 180, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 360, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 540, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 729, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 900, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1080, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1260, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1440, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1620, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1800, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 1980, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2160, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2340, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2520, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2700, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 2880, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 3060, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 3240, 0,  { width: 180, height: 550, alpha: 1.0 } ));
images.push(new Image("/static/theme/lol/images/loader/sprite.jpg", 3420, 0,  { width: 180, height: 550, alpha: 1.0 } ));

然而，盡管網站（鏈接）顯示這應該設置圖像的x / y坐標，但當我使用console.log （圖像）時，數組中的每個圖像仍顯示為0/0而不是它們各自的值。

當我在options數組中移動x / y值時（在新的Image()內部使用width / height / alpha），整個sprite被擠壓到定義和顯示的寬度/高度，x / y值確實顯示在雖然console.log正確。

我很困惑這應該如何工作，希望有人能澄清這一點，並幫助我。

Answer 1

作為第三方spritesheet切割器的替代品，帆布本身可以切割精靈。

canvas有一個context.drawImage版本，可以從spritesheet中剪切精靈。

演示： http ： //jsfiddle.net/m1erickson/rmvQn/

例如，如果你有一個簡單的2-sprite spritesheet，如下所示：

你定義這樣的精靈：

var sprites = {};
sprites["shipOff"] = {
    x: 0,
    y: 0,
    w: 90,
    h: 90
};
sprites["shipOn"] = {
    x: 90,
    y: 0,
    w: 90,
    h: 90
};

給sprite對象一個draw（）方法，在你想要的x，y處按名稱繪制任何sprite：

sprites.draw=function(spritename,x,y){
    var sprite=this[spritename];
    ctx.drawImage(this.spritesheet,
        sprite.x,sprite.y,sprite.w,sprite.h,  // this clips the sprite!
        x,y,sprite.w,sprite.h
    );
}

並繪制這樣的精靈

// draw the "shipOn" sprite at canvas location 20,50

sprites.draw("shipOn", 20,50);

// draw the "shipOff" sprite at canvas location 100,50

sprites.draw("shipOff", 100,50);

或者將精靈導出為這樣的圖像

sprites.toImage=function(spritename){
    var sprite=this[spritename];
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");
    tempCanvas.width=sprite.w;
    tempCanvas.height=sprite.h;
    tempCtx.drawImage(this.spritesheet,
        sprite.x,sprite.y,sprite.w,sprite.h,
        0,0,sprite.w,sprite.h
    );
    var img=new Image();
    img.src=tempCanvas.toDataURL();
    return(img);
}

代碼段：只需定義精靈並從中創建圖像

var sprites={};
sprites["shipOff"]={x:0,y:0,w:90,h:90};
sprites["shipOn"]={x:90,y:0,w:90,h:90};
sprites.toImage=function(spritename){
    var sprite=this[spritename];
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");
    tempCanvas.width=sprite.w;
    tempCanvas.height=sprite.h;
    tempCtx.drawImage(this.spritesheet,
        sprite.x,sprite.y,sprite.w,sprite.h,
        0,0,sprite.w,sprite.h
    );
    var imagename=spritename+"Image";
    sprites[spritename].image=new Image();
    sprites[spritename].image.src=tempCanvas.toDataURL();
}
sprites.spritesheet=new Image();
sprites.spritesheet.onload=start;
sprites.spritesheet.crossOrigin="anonymous";
sprites.spritesheet.src="https://dl.dropboxusercontent.com/u/139992952/multple/double_ship.png";
function start(){
    sprites.toImage("shipOff");
    sprites.toImage("shipOn");

    // testing
    document.body.appendChild(sprites["shipOff"].image);
    document.body.appendChild(sprites["shipOn"].image);
}

Answer 2

您需要指定那些是x和y值。

例如

images.push（new Image（“/ static / theme / lol / images / loader / sprite.jpg”， x = 0 ， y = 0 ，{width：180，height：550，alpha：1.0}））;