Perché canvas.arc non funziona?
-
27-10-2019 - |
Domanda
Ho questo codice alla fine di una pagina 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");
});
ma mostra niente su. So che il problema è con la funzione ARC perché ctx.fillRect(0, 0, 100, 100);
funziona bene.
Qualche idea di cosa sto facendo male?
(Sì, devo JQuery)
Soluzione
È necessario utilizzare ctx.beginPath () prima ctx.arc () e ctx.stroke () in seguito, questo dice di tela per pulire il suo buffer prima dell'avvio di disegno e di buffer di uscita sulla tela dopo aver finito. fillRect () / strokeRect () gestisce già quelli iniziare / operazioni finali per voi.
Altri suggerimenti
Hai bisogno di fare un percorso:
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");
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow