1

キャンバスのコンテンツ（キャンバスのレンダリング画像）を含む新しいウィンドウを開くボタンを作成しようとしています。

これが私のJSコードです：

var canvas  = document.getElementById("thecanvas");
var dataUrl = canvas.toDataURL();
var context = canvas.getContext("2d");
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
function clickme() {
window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}​

HTMLコード：

<input type="button" onclick="clickme()" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">

しかし、「開く」ボタンをクリックしても何も起こりません...しかし、私は本当に理由がわかりません。私はチュートリアルのためにたくさんのサイトを見てきました。いくつかのコードをコピーして貼り付けましたが、それでも何も起こりません。私は何か間違ったことをしていますか？ありがとうございました！

4

1 に答える 1

2

まず、ステートメントを実行する順序が重要です。キャンバスに描画した後に呼び出す必要がありtoDataURLます。そうしないと、生成されたdataURLにそのコンテンツが含まれていません。

スクリプトタグがどのようなものかはわかりませんが、イベントをもう少し確実な方法で実行する実際の例を次に示します。http: //jsfiddle.net/b7G6J/

HTML：

<input id="thebutton" type="button" value="OPEN"/>

<canvas id="thecanvas" height="200" width="500" style="border:1px solid black">

JS：

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

// First drawing commands
context.fillStyle = "rgba(0, 0, 255, .5)";
context.fillRect(25, 25, 125, 125);
// Then toDataURL
var dataUrl = canvas.toDataURL();

var button = document.getElementById("thebutton");
button.onclick =function() {
  window.open(dataUrl, "toDataURL() image", "width=200, height=500");
}

</ p>

于 2012-11-05T04:01:25.327 に答える