Javascript HTML5画布游戏的Tileset_Javascript_Html_Image_Tile

Javascript HTML5画布游戏的Tileset

javascript html image

Javascript HTML5画布游戏的Tileset,javascript,html,image,tile,Javascript,Html,Image,Tile,我试图在HTML5画布上制作一个游戏，但是我不想上传大量的图片，我只想上传一个上面有所有瓷砖的图片。问题是，我不知道如何只显示图像的一部分。基本上我想做谷歌对这张图片的处理：除了固定高度/宽度的瓷砖。有人能告诉我怎么做吗？此外，如果画布中的图像与没有画布的常规html页面中的图像不同，我将如何在画布中执行该操作？查看SpriteJS，在那里，工作是基于从单个图片绘制精灵时的偏移量。您可以使用drawImage的切片参数 drawImage(image, sx, sy, sWidth, sHeig

我试图在HTML5画布上制作一个游戏，但是我不想上传大量的图片，我只想上传一个上面有所有瓷砖的图片。问题是，我不知道如何只显示图像的一部分。基本上我想做谷歌对这张图片的处理：除了固定高度/宽度的瓷砖。有人能告诉我怎么做吗？此外，如果画布中的图像与没有画布的常规html页面中的图像不同，我将如何在画布中执行该操作？

查看SpriteJS，在那里，工作是基于从单个图片绘制精灵时的偏移量。

您可以使用

drawImage

的切片参数

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

```
sx
```
，
```
sy
```
：要切片的零件的左偏移和上偏移
```
sWidth
```
，
```
sHeight
```
：要切片的零件尺寸
```
dx
```
，
```
dy
```
：画布上要在
```
dWidth
```
，
```
dHeight
```
：画布上的图像尺寸

更多信息请访问：（MDC）这是我如何使用GWT的：