HTML 5 canvas如何从spritemap中提取和存储图像？

我也很想知道这是否是最佳做法。HTML 5 canvas如何从spritemap中提取和存储图像？

我打开一个精灵地图：

canvas = $('#GameCanvas')[0]; 
context = canvas.getContext('2d'); 

// load sprite map 
spriteMap = new Image(); 
spriteMap.src = "resources/spritemap.png";

现在我装我的精灵，我要画在屏幕上。我可以通过使用context.drawImage(..)但这样做的：的

我不知道这是不是最好的办法，而不是只提取我想每个图像，并分别将它们存储如。 var playerCharacter = [cut the image out of the sprite map]
我想着色图像。如果我拔出一个“白色”精灵，我可能会想要将它着色为红色，绿色等。我不知道如何去做，但它可能需要创建一个新的着色Image，所以我不得不无论如何，将它从spritemap中拉出来。我不想不断地重新着色。

任何想法这样做的最好方法？

来源

2013-04-02 NibblyPig

使用性能精灵

Phrogz对CSS VS帆布这里一些有用的FPS测试：Efficiency of <canvas> and <div>s他们是活的测试，这样你就可以在你想测试环境中运行它们。

再显色精灵

如果你想快速把你的白色精灵，并从它创建的红，绿，蓝精灵，你可以使用globalCompositeOperation =”源式”做的很少工作。只需使用图像编辑器即可创建要重新着色的图像部分的切口。然后使用下面的代码自动创建不同的彩色精灵。我在Photoshop中使用魔法需要的工具 - 2分钟上衣！

原始鱼+面膜=绿鱼

enter image description here

当然，你可以创造任何你想要的颜色......即使模式而不是纯色！

这是代码。你可能需要创建自己的图像和面具，因为CORS - 愚蠢的CORS！

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

    <style> 
     canvas{border:1px solid red;} 
     #wrapper{ position:relative;} 
     #overlay,#base{ position:absolute; top:0; left:0;} 

    </style> 

    <script> 
$(function(){ 

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

    var img=new Image(); 
    img.onload=function(){ 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,overlay.width,overlay.height); 
    } 
    img.src="http://dl.dropbox.com/u/139992952/stackoverflow/fish%20overlay.png"; 

    function draw(red,green,blue) { 
     ctx.save(); 
     ctx.globalCompositeOperation = 'source-in'; 
     ctx.fillStyle="rgb("+red+","+green+","+blue+")"; 
     ctx.beginPath(); 
     ctx.rect(0,0,overlay.width,overlay.height); 
     ctx.fill(); 
     ctx.restore(); 
    } 

    $("#red").click(function(){ draw(255,0,0); }); 
    $("#green").click(function(){ draw(0,255,0); }); 
    $("#blue").click(function(){ draw(0,0,255); }); 

    }); 

    </script> 

</head> 

<body> 
    <button id="red">Red Fish</button>  
    <button id="green">Green Fish</button> 
    <button id="blue">Blue Fish</button> 
    <div id="wrapper"> 
     <img id="base" src="http://dl.dropbox.com/u/139992952/stackoverflow/fish.png" width=350 height=250> 
     <canvas id="overlay" width=350 height=250></canvas> 
    </div> 
</body> 

</html>

来源

2013-04-02 17:55:30 markE

哦，那太好了！感谢您的屏蔽技巧:) – NibblyPig

我问的主要问题是，我应该直接从spritemap中绘制，还是在我的init（）方法中，我应该将spritemap分隔成不同的图像？ – NibblyPig

HTML 5 canvas如何从spritemap中提取和存储图像？

回答

相关问题