圓可以在數(shù)據(jù)可視化中作為餅狀圖基礎(chǔ)圖形椿疗，也是在canvas中必不可少的圖形
語(yǔ)法：
ctx.arc(x, y, radius, startAngle, endAngle, Boolean)
圓心坐標(biāo): (x, y)
半徑: radius
起始角度: startAngle
結(jié)束角度: endAngle
是否逆時(shí)針旋轉(zhuǎn): false 代表順時(shí)針旋轉(zhuǎn)
// 開(kāi)始繪制路徑
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
// 繪制圓的路徑**
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
// 0°是從三點(diǎn)鐘方向開(kāi)始的
// 描邊路徑
ctx.stroke();
image.png
畫(huà)圓就是如此簡(jiǎn)單~
了解圓的方向
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.translate(250, 250);
// 順時(shí)針
ctx.arc(0, 0, 100, 0, 2 * Math.PI / 4 * 3);
// 是否閉合路徑 : 閉合路徑后起點(diǎn)與終點(diǎn)會(huì)連接
// ctx.closePath();
ctx.stroke();
ctx.font = '16px bold';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('0°', 120, 0);
ctx.fillText('90°', 0, 120);
ctx.fillText('180°', -120, 0);
ctx.fillText('270°', 0, -120);
圓的方向.PNG
closePath.gif
栗子： 再來(lái)個(gè)圓~
步驟:
- 先畫(huà)中心點(diǎn)的圓
- 再畫(huà)起始點(diǎn)的圓
- 在畫(huà)圓的路徑
- 最后畫(huà)上結(jié)束點(diǎn)的圓
image.png
var draw = document.getElementById('draw');
// 2D上下文 ： 可會(huì)知簡(jiǎn)單的2D圖形，矩形 弧形 路徑
var ctx = draw.getContext('2d');
// 重新初始化一下畫(huà)布
function initCtx() {
// 清除畫(huà)布
ctx.clearRect(0, 0, 500, 500);
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
// 通過(guò)for, 循環(huán)執(zhí)行畫(huà)線(xiàn)動(dòng)作
for (var i = 0; i <= 10; i++) {
// 開(kāi)始繪制路徑
ctx.beginPath();
// (列)
// 路徑的起點(diǎn) (下筆)
ctx.moveTo(i * 50, 0);
// 路徑的終點(diǎn) (提筆)
ctx.lineTo(i * 50, 500);
// (行)
// 路徑的起點(diǎn) (下筆)
ctx.moveTo(0, i * 50);
// 路徑的終點(diǎn) (提筆)
ctx.lineTo(500, i * 50);
// 關(guān)閉路徑
ctx.closePath();
// 描邊路徑
ctx.stroke();
}
}
// 初始化
initCtx();
// 開(kāi)始畫(huà)x軸，y軸
ctx.beginPath();
ctx.strokeStyle = 'orange';
ctx.lineWidth = 4;
ctx.moveTo(50, 250);
ctx.lineTo(450, 250);
ctx.fillText('X', 50, 240);
ctx.moveTo(250, 50);
ctx.lineTo(250, 450);
ctx.fillText('Y', 250, 40);
ctx.stroke();
