用 Canvas 繪制一條弧形或一個(gè)圓:
利用 Canvas 2D 的 arc 方法,可以繪制弧形漓骚,arc 弧形以一個(gè)點(diǎn)為中心俯树,以固定的半徑繪制:
javascript 代碼
var cvs = document.getElementById("cvs"); // cvs 是 canvas 標(biāo)簽的 id
var pro = cvs.getContext("2d");
pro.beginPath();
pro.arc(100, 75, 50, 0, 1.5*Math.PI, false);
// 參數(shù):(x軸,y軸畜挨,半徑筒繁,起始角度噩凹,結(jié)束角度,方向)
pro.strokeStyle = "red"; // 填充顏色
pro.stroke(); // 填充
Canvas 弧形
其中關(guān)于 arc 的第四毡咏,第五個(gè)參數(shù)驮宴,是圓的起始角度,以三點(diǎn)鐘方向?yàn)槠瘘c(diǎn)(0)血当,以 2 * pi 角度為一圈的終點(diǎn)幻赚。
圖片引用w3cschool
arc 方法的默認(rèn)繪制方向是順時(shí)針,繪制方向可以用最后一個(gè)參數(shù)控制臊旭,默認(rèn)為 false落恼。
最后用 stroke 或 fill 描邊或填充顏色即可完成軸心弧形的繪制。
上一篇 Context2D 圖形庫