Почему canvas.arc не работает? - PullRequest
Новая
       35

Почему canvas.arc не работает?

1 голос
/ 12 июня 2011

У меня есть этот код в конце веб-страницы: 

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)

Ответы [ 2 ]

4 голосов
/ 12 июня 2011

Вам необходимо использовать ctx.beginPath () перед ctx.arc () и ctx.stroke () после этого, это говорит холсту очистить свой буфер перед началом рисования и выводить буфер на холст после его завершения. fillRect () / strokeRect () уже обрабатывает эти начальные / конечные задачи для вас.

1 голос
/ 12 июня 2011

Вам нужно сделать путь: 

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");
});
...