Question

我也很想知道这是否是最佳做法。

我加载精灵地图：

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中拉出来。我不想经常重新着色。

知道最好的方法吗？

Answer 1

使用精灵的效果

Phrogz在这里对CSS vs Canvas进行了一些有用的FPS测试：Efficiency of <canvas> and <div>s它们是实时测试，因此您可以在要测试的环境中运行它们。

重新着色精灵

如果你想快速拍摄你的白色精灵并从中创建红色，绿色和蓝色精灵，你可以使用 globalCompositeOperation =“source-in”来做很少的工作。只需使用图像编辑器创建要重新着色的图像部分的剪切。然后使用下面的代码自动创建不同的彩色精灵。我使用魔法想要的工具在Photoshop中做了下面的面具 - 2分钟顶部！

Original Fish + Mask = Green Fish

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>

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

1 个答案: