3

Web ページの最後に次のコードがあります。

var canvas = document.getElementByID("canvas");
var ctx = canvas.getContext("2d");
canvas.style.width = $(window).width();
canvas.style.height = $(window).height();
ctx.arc(50, 50, 50, 0, Math.PI * 2, false);
$(window).resize(function () { 
  canvas.style.width = $(window).width();
  canvas.style.height = $(window).height();
  console.log("resize");
});

しかし、何も表示されません。正常に動作するため、アーク関数に問題があることはわかっていctx.fillRect(0, 0, 100, 100);ます。

私が間違っていることは何ですか？

(はい、私は JQuery を持っています)

4

3 に答える 3

4

ctx.arc() の前に ctx.beginPath() を使用し、後で ctx.stroke() を使用する必要があります。これにより、描画を開始する前にバッファーを消去し、終了後にキャンバスにバッファーを出力するようにキャンバスに指示します。fillRect()/strokeRect() は、これらの開始/終了タスクを既に処理しています。

于 2011-06-11T22:41:09.743 に答える
2

パスを実行する必要があります:

var canvas = document.getElementByID("canvas");
var ctx = canvas.getContext("2d");
canvas.style.width = $(window).width();
canvas.style.height = $(window).height();

ctx.beginPath(); // <-- start a path

ctx.arc(50, 50, 50, 0, Math.PI * 2, false); // <-- add the arc to the path

ctx.strokeStyle = "#000000"; // <-- set fill color
ctx.stroke(); // <-- draw the arc

$(window).resize(function () { 
  canvas.style.width = $(window).width();
  canvas.style.height = $(window).height();
  console.log("resize");
});
于 2011-06-11T22:42:48.383 に答える