Chrome 不会在画布中显示“new Image()”

Question

这里是初级开发者。我的一课是仅使用 Image() 构造函数将图像放置（和转换）到画布中。也就是说，不创建链接到位于 HTML 代码中的图像元素的变量。考虑以下几点：

<script type = "text/javascript">
    function draw(){
        var drawing = document.getElementById("drawing");
        var con = drawing.getContext("2d");
        var dog = new Image();
        dog.src = "dog.jpg";

        //begin transformation

        con.save();
        con.translate(200, 100);
        con.rotate(25*Math.PI/180);
        con.drawImage(dog, 0, 0);
        con.restore();
    }
</script>`

为了可见性，我使用了一些 CSS 将画布勾勒为红色，并将其移近屏幕中心。尽管我付出了所有努力，Chrome 仍不会显示图像，但 IE 会。但是，IE 确实需要提示才能显示图像：“Internet Explorer 限制此网页运行脚本或 ActiveX 控件。”使用他们提供的按钮允许此操作后，图像会显示。

另一方面，Chrome 不提供任何类型的提示。我到处寻找答案，甚至启用/禁用所有脚本运行选项和扩展（包括弹出窗口和下载）都无济于事。

为了清楚起见，我知道还有其他方法可以正确显示图像，但我担心的是为什么它在这种情况下无法与 Chrome 一起使用。

Answer 1

您的代码没有等待图片加载：

    var drawing = document.getElementById("drawing");
    var con = drawing.getContext("2d");
    var dog = new Image();

    //begin transformation
    dog.onload = function() {
      con.save();
      con.translate(200, 100);
      con.rotate(25*Math.PI/180);
      con.drawImage(dog, 0, 0);
      con.restore();
    };

    dog.src = "dog.jpg";

通过将图像复制代码放入“加载”处理程序，您可以确保图像像素实际可用。如果图像恰好已经在浏览器缓存中，则无需支付显着的性能损失。