2

Webから絵を描きたいので、W3C Shoolの例である次のhtml5コードがありますが、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' に変更しますが、それでも機能しません。

4

1 に答える 1

2

問題は、ロードされる前に画像を描画しようとしていることです。次のようなものを試してください。

    <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>
于 2012-11-22T09:19:56.003 に答える