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

【问题标题】：How to load and draw png image in Haxe (JavaScript)?如何在 Haxe (JavaScript) 中加载和绘制 png 图像？
【发布时间】：2017-09-30 22:07:06
【问题描述】：

之前我用过这样的东西（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写这段代码。我找到了仅用于矢量绘图的示例。
谢谢！

【问题讨论】：

不能按照js-libraries写这段代码是什么意思？
js.html.CanvasRenderingContext2D、js.html.Image、js.html.ImageData、js.Browser。我们只能通过这些库访问 javascript 代码。

标签： javascript canvas haxe

【解决方案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 绘制图像，从而可以针对任何平台。

【讨论】：

【解决方案2】：

您可以将确切的代码移植到 Haxe： https://try.haxe.org/#a7287

import js.Browser.*;
import js.html.*;

class Test {
    static function main() {
        var img;
        window.onload = function() {  
            var canvas:CanvasElement = cast document.getElementById("myCanvas");  
            var context = canvas.getContext2d();  
            img = document.createImageElement();  
            img.onload = function() {  
                context.drawImage(img,0,0);  
            };
            img.src = "maze.png";
        }
    }
}

【讨论】：

这是我答案代码的更合适的替代方案，尽管只需确保将编译后的 javascript 添加到带有 ID 为 myCanvas 的 canvas 元素的 html 页面。我在 try.haxe 中工作，因为 JS 制作了 canvas 元素，但我不建议在生产中这样做。
有充分的理由使用预先存在的画布元素，并且 OP 自己知道它们。而我对他的问题的理解是，他想知道如何用 Haxe 编写代码。