在 JS 中创建非动画精灵表答案

【问题标题】：Create non-animated spritesheet in JS在 JS 中创建非动画精灵表
【发布时间】：2016-05-27 00:39:04
【问题描述】：

我正在努力使用 javascript 将一副小卡片的图像转换为 spritesheet 形式。我需要将它们放入一个数组中以便对它们进行洗牌。这是我到目前为止所得到的。只有画布在深蓝色背景下显示为浅蓝色。

<html>
  <head>
    <style>
      canvas#game-canvas {
        position: absolute;
        top: 5%;
        left: 5%;
        background: lightblue;
        height: 281px;
        width: 500px;
      }
      body {
        background: darkblue;
      }    
    </style>
    <script type="text/javascript" src="jquery1_10_2_min.js"></script>
    <script>
      var canvas = document.getElementById("game-canvas");
      var ctx = canvas.getContext("2d");

      function SpriteSheet(path, frameWidth, frameHeight) {

         this.image = new Image();
         this.frameHeight = frameHeight;
         this.frameWidth = frameWidth;


         // calculate the number of frames in a row after the image loads
         var self = this;
         this.image.onload = function() {
            self.framesPerRow = Math.floor(this.image.width / frameWidth);
         };

         this.image.src = path;

      }

      var spritesheet = new SpriteSheet('small_playing_cards.png', 54, 65);   
    </script>

  </head>
  <body>
    <canvas id="game-canvas"></canvas>
  </body>
</html>

【问题讨论】：

您到底想做什么？ PS：您也没有绘制图像，并且缺少您想要框架的区域 x 和 y。
这是完整的代码吗？您是否打算向您的SpriteSheet 类添加方法以获取单个精灵？一方面，您需要从卡片映射到精灵表中的索引。

标签： javascript sprite-sheet

【解决方案1】：

这是一个重复的答案，无论如何你可以通过创建一个新的画布并将其绘制在主画布上来做到这一点。

PS：这不是我的服装代码，所以我会做一些我不会做的事情，比如创建变量等等。

1.从一个变量中创建分配为值的画布元素；

var Area=document.createElement("canvas")

2.设置此画布的框架大小；

Area.width=FrameWidth,
Area.height=FrameHeight

3. 在此画布中的 x/y（负值）中绘制您想要的框架所在的 spritesheet；

var AContext=Area.getContext("2d");
AContext.drawImage(SpriteSheet,0-FrameX,0-FrameY);

4. 将此画布绘制为主画布中的图像，但具有 x/y 偏好；

MainCanvas.drawImage(Area,PreferenceX,PreferenceY)

就像这些步骤一样，您可以从 spritesheet 图像中绘制一帧。我不确定是不是你想要的，我也无法理解你的问题。

【讨论】：