Question

我想从网上画一张图片，所以我有以下的html5代码，这是W3C Shool的例子，但当我在Chrome中加载html页面时，显示的是图像。

<!DOCTYPE html>
<html>
    <body>
        <canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            var img=new Image();
            img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif';
            cxt.drawImage(img, 0, 0);
        </script>
    </body>
</html>

图片来自w3school，我可以在Chrome浏览器中查看，我的Chrome是最新版本，所以我不知道问题出在哪里，我甚至尝试将图片下载到我的本地计算机并将其放入上面的html页面的相同目录，将代码更改为img.src ='flower.gif'，但它仍然无法正常工作。

Answer 1

问题是您在加载图像之前尝试绘制图像。尝试这样的事情：

    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">

        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");

        var img=new Image();
        img.src='http://www.w3school.com.cn/i/ct_html5_canvas_image.gif';

        img.onload = draw;

        function draw(){               
            cxt.drawImage(img, 0, 0);            
        }


    </script>

canvas，drawImage不适用于远程图片

1 个答案: