Javascript Chrome将不显示“；新图像（）；在画布上

这里是初学者dev。我的课程之一是仅使用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>`

函数绘图（）{
var drawing=document.getElementById（“drawing”）；
var con=drawing.getContext（“2d”）；
var dog=新图像（）；
dog.src=“dog.jpg”；
//开始转变
con.save（）；
con.翻译（200100）；
逆时针旋转（25*Math.PI/180）；
con.drawImage（狗，0,0）；
con.restore（）；
}
`

我使用了一些CSS以红色勾勒出画布的轮廓，并将其移到靠近屏幕中心的位置，以便于查看。尽管我尽了全力，Chrome不会显示图像，但IE会。然而，IE确实需要提示图像显示：“Internet Explorer限制此网页运行脚本或ActiveX控件。”通过它们提供的按钮允许后，图像显示

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

---

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

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

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

---

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

此操作可能重复，谢谢。你知道为什么IE和Chrome的处理方式不同吗？IE似乎不需要加载处理程序来显示图像，只提示用户接受要运行的脚本。任何浏览器都需要加载处理程序，但如果图像在浏览器缓存中，IE的行为与其他浏览器略有不同。