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绘制图像，让您可以定位任何平台

Answer 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";
        }
    }
}

如何在Haxe（JavaScript）中加载和绘制png图像？

2 个答案: