Question

我正在努力使用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>

Answer 1

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

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

1。从一个变量创建以value作为值的canvas元素;

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图像中绘制一个帧。我不确定你是否想要，我也无法理解你的问题。

在JS中创建非动画spritesheet

1 个答案: