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确实需要提示图像显示：＆＃34; Internet Explorer限制此网页运行脚本或ActiveX控制＆＃34。使用它们提供的按钮进行此操作后，将显示图像。

另一方面，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";

将图像复制代码放入＆＃34;加载＆＃34;处理程序，您确保图像像素实际可用。如果图像恰好已经在浏览器缓存中，则不会有显着的性能损失。

Chrome无法显示＆＃34;新的图片（）＆＃34;在画布

1 个答案: