javascript - Canvas new Image() 来自 Sprite

Question

我已经编写了一个脚本，使用 http://www.clips.ua.ac.be/pages/pattern-canvas 中的 canvas.js 为一些图像添加动画效果。

但是，由于我的脚本尝试在页面加载时加载大约 20 个图像，因此最终运行至少需要 6 秒，因此我想通过使用 Sprite 来解决此问题。

我想知道如何从我的 Sprite 图像中获取新的 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 } ));

然而，尽管website (link)显示这应该设置图像的 x/y 坐标，当我使用 console.log(images) 时，数组中的每个图像仍然显示为 0/0 而不是它们各自的值。

当我在选项数组内移动 x/y 值时(在具有宽度/高度/alpha 的新 Image() 内)，整个 Sprite 会被挤压到定义并显示的宽度/高度， x/y 值确实正确显示在 console.log 中。

我对这应该如何工作感到非常困惑，希望有人能澄清这一点并帮助我。

Answer 1

作为第 3 方 spritesheet 剪切器的替代方案，canvas 本身可以剪切 sprite。

Canvas 有一个 context.drawImage 版本，可以从 spritesheet 中剪切 sprite。

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

例如，如果您有一个简单的 2-sprite spritesheet，如下所示:

您可以这样定义 Sprite :

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

为 sprites 对象提供一个 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
    );
}

并绘制像这样的任何 Sprite

// 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);

或者将 Sprite 导出为这样的图像

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);
}

片段:只需定义 Sprite 并从中创建图像

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);
}