¿Por qué no funciona Canvas.Arc?
-
27-10-2019 - |
Pregunta
Tengo este código al final de una página 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");
});
Pero no aparece nada. Sé que el problema es con la función de arco porque ctx.fillRect(0, 0, 100, 100);
funciona bien.
¿Alguna idea de lo que estoy haciendo mal?
(Sí, tengo jQuery)
Solución
Debe usar ctx.beginpath () antes de ctx.arc () y ctx.stroke () después, esto le dice a Canvas que limpie su búfer antes de que comience a dibujar, y que salga del búfer al lienzo después de que termine. Fillrect ()/Strokerect () ya maneja esas tareas de comienzo/finalización por usted.
Otros consejos
Necesitas hacer un camino:
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");
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow