如何使用純javascript從精靈表中提取精靈-有解無憂

所以我有這個精靈表，里面有來自塞爾達傳說的所有不同的瓷磚，有沒有辦法讓我可以進入像 getTile(2,1) 這樣的函式，它會回傳騎士的 base64 編碼？
如何使用純 javascript 從精靈表中提取精靈

到目前為止，我已經嘗試過這個

function getTiles() {
  var sprites = new Image();
  sprites.src = 'https://cdn.glitch.me/b3505ee1-a321-48ea-baf5-d84841324af1/d3b13ce6-f5ed-4122-9bd9-37f74d13d470.image.png?v=1634242985542';

  allOverworldTiles = []

  var i = 0;
  for (var top = 0; top < 8 * 17; top  = 17) {
    for (var left = 0; left < 20 * 17; left  = 17) {
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = 16;
      canvas.height = 16;
      ctx.drawImage(sprites, left   1, top   1, 16, 16, 0, 0, 16, 16)
    }
  }
  var dataURL = canvas.toDataURL("image/png");
  var newTab = window.open('about:blank', 'image from canvas');
  newTab.document.write("<img src='"   dataURL   "' alt='from canvas'/>");
}

如果答案是在 vanilla javascript 中，我會更喜歡

uj5u.com熱心網友回復：

您的代碼中的一些問題...

您需要一個 onl oad 事件來確保影像已加載，然后才能執行任何操作
你需要，sprites.crossOrigin="anonymous"否則你會得到一個被污染的畫布錯誤
你的邏輯不清楚，你有一個雙回圈，但回圈外只有一個 toDataURL

這是一個作業原型

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = canvas.height = 16;

var sprites = new Image();
sprites.crossOrigin="anonymous"
sprites.src = 'https://cdn.glitch.me/b3505ee1-a321-48ea-baf5-d84841324af1/d3b13ce6-f5ed-4122-9bd9-37f74d13d470.image.png?v=1634242985542';
sprites.onload = getTiles

function getTile(x, y) {
  ctx.drawImage(sprites, x * 17   1, y * 17   1, 16, 16, 0, 0, 16, 16)
  return canvas.toDataURL("image/png");
}

function getTiles() {
  var knight1 = getTile(2, 1)
  document.write("<img src='"   knight1   "'/>");
  
  var knight2 = getTile(8, 1)
  document.write("<img src='"   knight2   "'/>");
  
  var knight3 = getTile(14, 1)
  document.write("<img src='"   knight3   "'/>");
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318012.html

標籤：javascript dom html5-canvas 精灵精灵表

上一篇：ggplot2：更改scale_color_viridis_c的Alpha但不更改圖例

下一篇：js中for回圈中的addEventListener