我使用

javascript和畫布繪制一個數學設計的尺度(用于測量扭矩,包括牛頓米和英尺磅).我已經用三角法來定位我的刻度,自然地用弧線繪制電弧線.問題來了,當他們需要排隊,但有一些奇怪的失真.然后我繪制了一個非常大的圓圈,并將其與GIMP中的圓形選擇進行了比較,并發生了扭曲.圓圈圍繞圓圈每45度一致,但是在這些節點之間,畫布繪制的圓圈向外偏離,非常像可以向外圓得太遠以近似圓的八邊形.

為什么會發生這種扭曲？如何在畫布上畫一個圓圈？

這是我用來產生我扭曲的圈子的代碼.

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.beginPath();

context.arc(4000, 4000, 3200, 0, Math.PI*2, false);

context.lineWidth = 1;

context.strokeStyle = '#ff0000';

context.lineCap = 'square';

context.stroke();

這可能不是最小的,我不知道context.lineCap的相關性,但它是基于這個代碼的遺跡.

以下屏幕截圖顯示了GIMP繪制的圓與Chrome繪制的圓之間的區別

總結

以上是生活随笔為你收集整理的html 怎么在画布上绘制一个圆,javascript – 如何在画布上画一个圆圈？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。