0

これは、キャンバスhttp://jsfiddle.net/ArtBIT/kneDX/で描画する方法に関するスタックオーバーフローの質問で見つかりました。キャンバスで html ページ全体をカバーしたいと考えています。例えば：

<body>
  <div id="2">
    //code
  </div>
  <div id="2">
    //code
  </div>
</body>

そのため、キャンバスがページに添付され、ユーザーはページのコンテンツを描画できます。ボディの 100% を描画線とは別に非表示にするために、キャンバスを作成する方法はありますか?

編集:

上記のコードで円を作らずに連続して線を引くにはどうすればよいですか? また、マウスを上に置いたときに選択せずにテキストの上に何かを描画する方法はありますか?

4

2 に答える 2

3

最初に、canvas のプロパティheightとプロパティをページの高さとページの幅widthに等しくします。(これらの値を取得するのは非常に難しいため、リンクされた質問を参照して、それを行う最善の方法を確認するか、jQuery を使用してください。)

次に、CSS を追加して、キャンバスをページの絶対左上隅に配置します。

#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

次に、を呼び出して現在行っているように、キャンバスの背景色を変更しないctx.clearToでください。キャンバスはデフォルトで透明なので、背景色を変更しない限り、その下のページを見ることができます。

于 2012-12-14T20:14:38.393 に答える
1

(200, 200) の代わりに正しい幅と高さのパラメーターを渡します

を使用するwindow.screen.widthと、window.screen.heightこれが得られます: http://jsfiddle.net/kneDX/878/

アップデート：

これにより、クライアント領域と同じサイズではなく、ウィンドウと同じ大きさのキャンバスになります。apsillers の回答を参照してください。

于 2012-12-14T20:02:27.940 に答える