在JS中創建非動畫spritesheet

-2

我正在努力使用javascript將一張小卡片的圖像變成spritesheet形式。我需要把它們放到一個數組中以便洗牌。這是迄今爲止我所擁有的。只有畫布在深藍色背景上顯示爲淺藍色。在JS中創建非動畫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>

來源

2016-02-15 tidelake

你究竟想要做什麼？ PS：你也沒有畫出圖像，它缺少你想要的框架的區域x和y。 – Hydro

這是完整的代碼嗎？你是否打算將方法添加到你的'SpriteSheet'類來獲得單個精靈？首先，您需要將一些東西從卡片映射到精靈表中的索引。 – GregL

這是一個重複的答案，反正你可以通過創建一個新的畫布和繪圖它的主要做到這一點。

PS：這不是我的服裝的代碼，所以我會盡出頭我不會做，如創建變量等

1.創建asigned爲值從一個變量canvas元素;

var Area=document.createElement("canvas")

2.設置幀大小來此帆布;

Area.width=FrameWidth, 
Area.height=FrameHeight

3.畫出spritesheet在此帆布在想要的幀位於所述X/Y（負）;

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

4.畫出此帆布在主畫布圖像，但隨着x/y的偏好;

MainCanvas.drawImage(Area,PreferenceX,PreferenceY)

這就像這些步驟，你可以從一個spritesheet圖像畫一幀。我不確定是否你想要，我也不明白你的問題。

來源

2016-02-15 23:14:38 Hydro

在JS中創建非動畫spritesheet

回答

相關問題