なぜCanvas.ARCが機能していないのですか?
-
27-10-2019 - |
質問
このコードは、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を持っています)
解決
CTX.BEGINPATH()を使用する必要があります。CTX.ARC()およびCTX.STROKE()を使用すると、その後、CANVASに描画を開始する前にバッファーをクリーニングし、終了後にバッファーをキャンバスに出力するように指示します。 fillRect()/strokerect()は、これらの開始/終了タスクをすでに処理しています。
他のヒント
あなたは道をする必要があります:
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");
});
所属していません StackOverflow