javascript - 如何在 Haxe (JavaScript) 中加载和绘制 png 图像？

Question

之前我用过类似的东西(html5+javascript):

var img;
  window.onload = function(){  
  var canvas = document.getElementById("myCanvas");  
  var context = canvas.getContext("2d");  
  img = new Image();  
  img.onload = function() {  
  context.drawImage(img,0,0);  
  };  
  img.src = "maze.png";

现在学的是Haxe(platform-javascript)，不会按照js-libraries写这段代码。我只找到了矢量绘图的示例。
谢谢!

Answer 1

很可能将该代码移植到 javascript；要在 Haxe API 中查找 javascript 类，只需在 api.haxe.org 上搜索它们.在本例中，Image 类是 js.html.Image。这是图像绘制的基本示例:view example on try.haxe

var canvas = js.Browser.document.createCanvasElement();
canvas.width = 400;
canvas.height = 400;
js.Browser.document.body.appendChild(canvas);

var ctx = canvas.getContext2d();
var img = new js.html.Image();  
img.onload = function() {  
    ctx.drawImage(img,0,0);  
};  
img.src = "http://dreamicus.com/data/maze/maze-02.jpg";

存在替代库，使这更容易和更跨平台。如果您只是编写要编译为 javascript 的代码，那么您并没有充分利用完整的 haxe 生态系统 - kha 和 phaser 等库可让您使用标准 API 绘制图像，该 API 可让您针对任何平台。