Html 5 проблема с холстом - arc искажается

Я использую следующий код для рисования дуги с использованием html5 canvas.Html 5 проблема с холстом - arc искажается

Это мой код

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="1000" height="550" style="padding-top:20px;border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(293.5, 183.4375, 186.70352183177323, 4.71238898038469, 6.8067840827778845); 
    ctx.arc(293.5, 190.4375, 93.40238454336179, 6.8067840827778845, 4.71238898038469, true); 
    ctx.closePath(); 
    ctx.strokeStyle = "white"; 
    ctx.lineWidth = 1; 
    ctx.fillStyle = "red"; 
    ctx.fill(); 
    ctx.stroke(); 
</script> 

</body> 
</html>

Это как дуга выглядит. IF наблюдается близко, верхний левый конец внешней дуги имеет небольшую плоскую поверхность. Может ли кто-нибудь рассказать мне, почему это происходит? Почему не дуга гладкая?

источник

2016-08-23 ASR

Вторая дуга имеет вискозу больший, чем у центрального положения. Это вне элемента холста.

Вы можете увидеть изменения здесь: https://jsfiddle.net/o1rdkj8u/

ctx.arc(293.5, 183.4375, 183.43753/*186.70352183177323*/, 4.71238898038469, 6.8067840827778845); 
ctx.arc(293.5, 183.4375/*190.4375*/, 93.40238454336179, 6.8067840827778845, 4.71238898038469, true);

Кроме того, ваши arcq не имеют один и тот же центр. Если это не то, что вы хотите, взгляните на него.

источник

2016-08-23 16:36:54

Штрихи нарисованы полу-внутри и наполовину вне вашей дуги.

Половина наружной части вашей дуги обрезается верхней частью холста.

Итак, если вы хотите, чтобы штрих полностью помещался внутри холста, убедитесь, что вы вычитаете половину ширины линии контекста.

radius = radius - context.lineWidth/2;

Так что для вашей дуги:

ctx.arc(
    293.5, 183.4375, 
    186.70352183177323 - ctx.lineWidth/2,  // subtract half linewidth 
    4.71238898038469, 6.8067840827778845 
);

источник

2016-08-23 16:38:32 markE

Html 5 проблема с холстом - arc искажается

ответ

Смежные вопросы