Почему Canvas.arc не работает?
-
27-10-2019 - |
Вопрос
У меня есть этот код в конце веб -страницы:
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 (). После этого это говорит о том, что холст очистит свой буфер, прежде чем он начинает рисовать, и для вывода буфера на холст после его завершения. 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