4

javascript で作成したキャンバスを別のキャンバスに描画しようとしています。しかし、それは私にとってはうまくいきません、

ここに私のコードがあります、

    <!DOCTYPE HTML>
<html>
  <head>
    </script>
       <script>
        window.onload = function(){  
        var can1 = document.createElement('canvas');
        can1.width = 150;
        can1.height = 140;
        can1.style.cssText = 'top:2px;left:2px;border:2px  solid black;';

        var ctx1 = can1.getContext('2d');
        var img=new Image();
        img.src="images/211.jpg"
        ctx1.drawImage(img,0,0);

        var can = document.getElementById("c");
        var ctx = can.getContext('2d');
        ctx.drawImage(can1,0,0);
        var canvas =  document.getElementById("c"); 
        window.open(canvas.toDataURL());
        }

    </script>
</head>
<body >
    <canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px  solid black;"></canvas>
</body>
</html>
4

3 に答える 3

10

問題は、その画像をキャンバスに描画しようとしたときに、画像の準備ができていなかったことだと思います。したがって、これを行うと、完全に機能します。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {

        var imageObj = new Image();
        imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";

        var dynamicCanvas = document.createElement("canvas");
        var dynamicContext = dynamicCanvas.getContext("2d");
        dynamicCanvas .height="400";
        dynamicCanvas.width="578";

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        imageObj.onload = function() {
          dynamicContext.drawImage(imageObj, 69, 50);
          context=context.drawImage(dynamicCanvas,69,50);
          window.open(canvas.toDataURL());
        };
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
  </body>
</html>

ダイナミックキャンバスの高さと幅を調整できます。

そのwindow.openステートメントを削除すると、完璧です。

しかし、問題がありますcanvas.toDataURL()

ローカルファイルに対して実行しようとするとcanvas.toDataURL()、セキュリティエラーが発生します（Google Chromeで検査した場合）。

Uncaught Error: SECURITY_ERR: DOM Exception 18

このエラーについて詳しく知ることができます：ここ （このエラーが発生しているかどうかを確認してください）。とにかく、根本的な原因は整理されており、今ではまったく新しい問題があります：D..とにかく幸運を祈ります!!

于 2012-07-12T13:50:00.090 に答える
2

MJQ の元のコードを使用した不適切な画像表示の問題は、2 番目のキャンバスのサイズを属性で直接指定せず、スタイルのみで指定していることです。したがって、ブラウザーはデフォルト サイズ (FF の場合は 300x150) のキャンバスを作成し、それを 250x350 に引き伸ばします。

したがって、次の変更により、画像表示が解決されます。

<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px  solid black;"></canvas>

多分これは将来誰かを助けるでしょう。

于 2014-06-25T10:21:54.100 に答える
1

あなたは何をしていますか？あなたのコードは機能しています。

（質問が正しく得られている場合）後に次の行を追加しました

can1.style.cssText='border:2px solid black;';

:

        var ctx1 = can1.getContext('2d');
        ctx1.rect(50, 50, 500, 500);
        ctx1.fillStyle = '#8ED6FF';
        ctx1.fill();

実行すると、中に美しい長方形が表示されます!! html5対応のブラウザを使っていますか??

于 2012-07-12T10:55:28.590 に答える