那麼,按層級分析,裡面有幾個部分:
空心圓(進度條的背影)
空心圓(進度條)
空心圓(實心圓的邊框)
實心圓文字(進度)
文字(最二行)
確認了需要繪製的部分起碼有6塊。
canvas了解
根據上面的各層級需求,大概可能會使用上的api如下
// 線寬
ctx.linewidth
// 用於指定結束線帽的樣式
ctx.linecap
// 繪製漸變色
ctx.createlineargradient
// 指定線條繪圖顏色
ctx.strokestyle
// 指定填充繪圖顏色
ctx.fillstyle
// 建立乙個圓
ctx.arc()
// 繪製文字
ctx.filltext()
// 指定文字字樣
ctx.font
// 指定文字位置
ctx.textalign
canvas畫圓說明
就是ctx.arc(x, y, redius, startangle, endangle, counterclockwise)
這個方法可以建立乙個圓形,接收6個引數,分別為 圓心x座標,圓心y座標, 圓半徑,起始弧度,結束弧度,是否逆時針繪製
角度=180°×弧度÷π ,弧度=角度×π÷180°
// html部分
// js部分
let canvas = document.getelementbyid('canvas');
let ctx = canvas.getcontext('2d');
canvas.width = math.ceil(300 / 1920 * window.innerwidth);
canvas.height = math.ceil(300 / 1920 * window.innerwidth);
class annulus );
}// 繪製進度條底層
drawbg(){}
// 繪製進度條
drawcirclelay(){}
// 繪製中心的大圓
drawcentercircle(){}
// 繪製大圓邊緣的邊
drawcenterbordercircle(){}
// 繪製進度文字
drawtextpercent(){}
// 繪製進度下面的文字
drawtextname(){}
// 定義動畫
animate()
// 執行
run()
}
drawbg()
drawcirclelay()
linearlocation()
}
drawcentercircle()
drawcenterbordercircle()
drawtextpercent(percent)
drawtextname()
讓它運動
接下來我們可以讓進度條動起來。
運動通用的有幾個點:
速度speed
經過的路程,在這就是角度degree
,因為是進度條,總量就是100, 這裡的圈的角度是 math.pi*2.25 - math.pi*0.75 = math.pi * 1.75。那麼1%的角度就是 math.pi*.1.5 / 100
我們還需要有乙個變數來記錄當前運動到的百分比tol
綜上,我們把 類的constructor
改造一下,如下:
constructor(obj = {});
this.textname = obj.text || '第二行文字title';
this.value = obj.value || 0;
// 這裡是圓的終點減去圓的起點
this.degree = math.pi*1.5/100;
this.animate = this.animate.bind(this);
this.tol = 0;
}
drawcirclelay()
drawcirclelay()
drawtextpercent()
tol
drawtextpercent(percent)px arial`;
ctx.textalign="center";
ctx.fillstyle="#192f47";
ctx.filltext(`$%`, this.location.x, this.location.y);
ctx.stroke();
}
animate()
animate()
}
至此,乙個進度盤已完成。其實還有很多改進空間,比如更合理的封裝,監聽window.resize
的時候進行大小的改變等。。
原文發布時間為:2023年06月17日
掘金
用PS畫乙個齒輪
以前只會畫圓畫方,這沒技術含量.今天學了乙個稍難一點的,畫乙個齒輪.圖形有圓也有方.以下描述如何畫出來的.一.開啟ps準備一畫布,畫一矩形並且填充顏色.二.編輯 自由變換 ctrl t 然後按住ctrl shift alt,用滑鼠點選右上角拖動至梯形.三.圖層複製乙個 將需要複製的圖層拖到新建圖層圖...
畫乙個空心圓 今天用「 」畫乙個空心的圓
題目描述 1 孟子曾說過 離婁之明 公輸子之巧,不以規矩,不能成方圓 而機房日子的潘老師最近有乙個苦惱,他希望能用手畫出乙個圓,但是他發現,用手畫出的圓始終不夠圓,為此,他決定使用點 規矩 問題分析與演算法設計 2 列印圓可利用圖形的左右對稱性。根據圓的方程 r r x x y y 可以算出圓上每一...
用line 函式畫乙個曲線
在ege介面,通過積分,座標旋轉,平移,可以畫出以任意兩點確定的半橢圓,並可控制其凸起程度。寫下了picture函式picture 第乙個點橫座標,第乙個點縱座標,第二個點橫座標,第二個點縱座標,凸起高度 凸起高度大於0時向上凸,小於0時向下凸 include graphics.h include ...