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

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

当我在options数组中移动x / y值时（在新Image()内有宽度/高度/ alpha），整个精灵被挤压到定义和显示的宽度/高度，x / y值尽管可以正确地显示在console.log。

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

Answer 1

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

画布有一个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上按名称绘制任何精灵：

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值。

e.g。

images.push（新图片（＆＃34; /static/theme/lol/images/loader/sprite.jpg" ;, x = 0 ， y = 0 < / strong>，{width：180，height：550，alpha：1.0}））;