摘要:最終效果一定義初始變量外環半徑圓環厚度內環半徑開始角度結束角度圓心坐標圓心坐標將繪圖原點移到畫布中央將畫布旋轉度初始填充顏色二工具方法計算圓環上點的坐標弧度轉角度角度轉弧度三渲染方法渲染函數繪制外環計算外環與內環第一個連接處的中心坐標繪
最終效果
一、定義初始變量
let radius = 140 //外環半徑
let thickness = 20 //圓環厚度
let innerRadius = radius - thickness //內環半徑
let startAngle = -90 //開始角度
let endAngle = 180 //結束角度
let x = 0 //圓心x坐標
let y = 0 //圓心y坐標
let canvas = document.getElementById("tutorial");
canvas.width = 300;
canvas.height = 300;
let ctx = canvas.getContext("2d");
ctx.translate(canvas.width / 2, canvas.height / 2);//將繪圖原點移到畫布中央
ctx.rotate(angle2Radian(225)) //將畫布旋轉225度
ctx.fillStyle = "#f2d7d7"; //初始填充顏色
二、工具方法
//計算圓環上點的坐標
function calcRingPoint(x, y, radius, angle) {
let res = {}
res.x = x + radius * Math.cos(angle * Math.PI / 180)
res.y = y + radius * Math.sin(angle * Math.PI / 180)
return res
}
//弧度轉角度
function radian2Angle(radian) {
return 180 * radian / Math.PI
}
//角度轉弧度
function angle2Radian(angle) {
return angle * Math.PI / 180
}
三、渲染方法
//渲染函數
function renderRing(startAngle, endAngle) {
ctx.beginPath();
//繪制外環
ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle))
//計算外環與內環第一個連接處的中心坐標
let oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)
//繪制外環與內環第一個連接處的圓環
ctx.arc(oneCtrlPoint.x, oneCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))
//繪制內環
ctx.arc(x, y, innerRadius, angle2Radian(endAngle), angle2Radian(startAngle), true)
//計算外環與內環第二個連接處的中心坐標
let twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)
//繪制外環與內環第二個連接處的圓環
ctx.arc(twoCtrlPoint.x, twoCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))
ctx.fill()
// ctx.stroke()
}
具體思路:
為了方便,代碼中使用弧度的地方一律由角度轉為弧度
1.繪制外環:
這一步最簡單,直接按照官方的使用方法使用即可
2.繪制外環與內環連接處的第一個圓環
首先算出,外環結束處與內環開始處中間點的坐標
計算圓環上點的坐標公式為:
x = x + radius Math.cos(angle Math.PI / 180)
y = y + radius Math.sin(angle Math.PI / 180)
代入以上公式可算出圓環上任意一點的坐標,然后再以此為圓心,圓環厚度/2為半徑 畫圓環
3.繪制內環
這一步只需將半徑縮短,并將繪制外環的開始角度與結束角度調換即可
4.繪制內環與外環連接處的第二圓環
和第二步同理,先計算出外環開始處與內環結束處中間點的坐標,然后再以此為圓心,圓環厚度/2為半徑 畫圓環
5.完成填充
到這一步,圓環就完成了
//進度條動畫
ctx.fillStyle = "#e87c7c";
let tempAngle = startAngle
let twoEndAngle = 0
let step = (twoEndAngle - startAngle) / 100
let numberSpan = document.querySelector(".number")
let count = 0
let inter = setInterval(() => {
if (tempAngle > twoEndAngle) {
clearInterval(inter)
} else {
count++
numberSpan.innerText = count
tempAngle += step
}
renderRing(startAngle, tempAngle)
}, 16.7)
動態計算結束角度,然后設定一個計數器,重復執行渲染方法。
五、完整代碼
canvas
1 分
服務分
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116128.html
摘要:最終效果一定義初始變量外環半徑圓環厚度內環半徑開始角度結束角度圓心坐標圓心坐標將繪圖原點移到畫布中央將畫布旋轉度初始填充顏色二工具方法計算圓環上點的坐標弧度轉角度角度轉弧度三渲染方法渲染函數繪制外環計算外環與內環第一個連接處的中心坐標繪 最終效果 showImg(https://segmentfault.com/img/bVbvCoX); 一、定義初始變量 let radius = 1...
摘要:最終效果一定義初始變量外環半徑圓環厚度內環半徑開始角度結束角度圓心坐標圓心坐標將繪圖原點移到畫布中央將畫布旋轉度初始填充顏色二工具方法計算圓環上點的坐標弧度轉角度角度轉弧度三渲染方法渲染函數繪制外環計算外環與內環第一個連接處的中心坐標繪 最終效果 showImg(https://segmentfault.com/img/bVbvCoX); 一、定義初始變量 let radius = 1...
摘要:需求概要小程序中使用圓形倒計時,效果圖思路使用個一個是背景圓環,一個是彩色圓環。 需求概要 小程序中使用圓形倒計時,效果圖:showImg(https://segmentfault.com/img/bV3Bko?w=265&h=267); 思路 使用2個canvas 一個是背景圓環,一個是彩色圓環。 使用setInterval 讓彩色圓環逐步繪制。 解決方案 第一步先寫結構 一個盒...
閱讀 2587·2023-04-26 03:00
閱讀 1402·2021-10-12 10:12
閱讀 4198·2021-09-22 15:33
閱讀 2925·2021-09-22 15:06
閱讀 1538·2019-08-30 15:44
閱讀 2151·2019-08-30 13:59
閱讀 538·2019-08-30 11:24
閱讀 2418·2019-08-29 17:07