用canvas畫乙個進度盤

2021-09-20 08:24:08 字數 2901 閱讀 6110

那麼,按層級分析,裡面有幾個部分:

空心圓(進度條的背影)

空心圓(進度條)

空心圓(實心圓的邊框)

實心圓文字(進度)

文字(最二行)

確認了需要繪製的部分起碼有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 ...