0 
<!DOCTYPE HTML>
<html>
<body>

    <canvas id="myCanvas" width="100" height="200" style="border:5px 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.onload = function(){
            // execute drawImage statements here};
        cxt.drawImage(img,0, 0, 50, 50, 0, 0);
        }
        img.src = "myimg.png";

    </script>

</body>
</html>
4

3 に答える 3

1

何かが足りないのかもしれませんが、何も表示されませんonload。そして、あなたにはいくつかの議論が欠けていると思います。私の知る限り、drawImage は 3 つ、5 つ、または 9 つの引数を取ります。あなたは 7 にいるので、おそらく 9 引数の関数を探しているでしょう。

試す：

<html>
<head>
<script type="text/javascript">
    function init() {
       var c=document.getElementById("myCanvas");
       var cxt=c.getContext("2d");
       var img=new Image();
       img.onload = function(){
          // execute drawImage statements here;
          // drawImage( src, sx,sy, sw, sh, dx, dy, dw, dh ); <-- 9 arg form.
          // src = the img (new Image();)
          // sx, sy, sw, sh  = The rectangle to draw to.
          // dx, dy = Where to position it.
          // dw, dh = Width and height to scale to.
          cxt.drawImage(img,0, 0, 50, 50, 0, 0, 50, 50);
       }
       img.src = "myimg.png";
    }

    window.onload = init;
</script>
</head>
<body>

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

</body>
</html>

それが役立つことを願っています。canvas画像の 使用方法について詳しくは、 http: //diveintohtml5.ep.io/canvas.html#imagesにアクセスしてみてください。

于 2011-07-26T15:16:12.450 に答える
0

元のコードは、さらに 2 つの引数を必要とする drawImage() 呼び出しを除いて正しいです。または、最初の 3 つを除くすべてを削除できます。

また、window.onload イベントをフックする必要はありません。これは、同じ効果を持つ body 要素で JavaScript が実行されているため、正しい場合にそうするように指示する答えは必要ありません。

修正が適用されたコードは次のとおりです。

<!DOCTYPE HTML>
<html>
<body>

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

    <script type="text/javascript">
        var c = document.getElementById("myCanvas"),
            cxt = c.getContext("2d"),
            img = new Image();

        img.onload = function(){
            // Execute drawImage() statements here
            cxt.drawImage(img, 0, 0, this.width, this.height, 0, 0, this.width, this.height);
        }
        img.src = "myimg.png";

    </script>

</body>
</html>
于 2012-11-27T18:14:50.007 に答える
0

あなたが何を達成しようとしているのか正確にはわかりませんが、画像を表示するだけの簡単なコードは次のとおりです。

  <script type="text/javascript">
        var c=document.getElementById("myCanvas").getContext("2d");
        var img=new Image();
        img.src = 'myimg.png';
        img.onload = function(){
            // execute drawImage statements here
          c.drawImage(img,0,0);
        }
     </script>
于 2011-07-23T10:36:14.527 に答える