純JS+Vue和canvas實現(xiàn)一個儀表盤方式

更新時間：2025年06月16日 09:01:02 作者：不想起名55

這篇文章主要介紹了純JS+Vue和canvas實現(xiàn)一個儀表盤方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、純JS+Vue

1. 先繪制基本的圓環(huán)背景

利用border-color和border-radius將正方形變成基本的圓環(huán)。

<div class="circle">
    <div class="Inner"></div>
</div>

.circle {
    position: relative;
    border-radius: 50%;
    border: 12px solid;
    border-color: green green transparent green;
    width: 480px;
    height: 484px;
    top: 4%;
    left: 12%;
}

利用border-radius，就可將正方形變成圓形

2. 背景繪制完成，下面就是每個刻度

<div class="circle">
    <div class="Inner"></div>
    <div class="center"></div>
    <div class="pointer"></div>
</div>

.center{
    width: 20px;
    height: 20px;
    background-color: grey;
    border-radius: 50%;
    position: absolute;
    z-index: 35;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}
.pointer{
    width: 190px;
    height:10px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 34;
    top: calc(50% - -2px);
    left: calc(50% - 6px); 
    transform-origin:5% 35%;
}
.number {
    color: #fff;
    display: block;
    padding-top: 16px;
    position: absolute;
    left: -6px;
}

一共100個值，每兩個刻度就要有線，到10線的長度會更長一點。其實和畫鐘表一樣，0的位置是坐標軸的225°，到100的位置，總共是180°+45°

mounted() {
	let circle = document.getElementsByClassName('Inner')[0];
	circle.style.setProperty('--width', Math.floor(227) + 'px');
	for (let i = 0; i <= 50; i++) {
	   const ul = document.createElement('ul');
	   const li = document.createElement('li');
	   li.style.transform = `rotate(${225 + i * 2 * 2.7}deg)`;
	   if (i % 5 === 0) {
	       li.style.height = '15px';
	       li.innerHTML = `<span class = 'number'>${i*2}</span>`
	   }
	   circle?.appendChild(ul);
	   ul.appendChild(li);
	}
}

3. 讓指針根據(jù)數(shù)據(jù)變動，和刻度一樣，每移動一個點要更改相應的刻度

<div class="circle">
	<div class="Inner"></div>
	<div class="center"></div>
	<div class="pointer"></div>
	<div class="num">{{dataValue}}%</div>
</div>

<script>
export default {
    data() {
        return {
            dataValue: 50,
            }
         }，
   watch: {
        dataValue: {
            handler(newValue, oldVal) {
                this.dataValue = newValue;
                this.runGuage()
            },
        },
    },
    methods: {
    	runGuage() {
            let pointer = document.getElementsByClassName("pointer")[0];
            pointer.style.transform = `rotate(${137 + this.dataValue * 2.66}deg)`;
        },
    }，
    mounted() {
        this.runGuage();
    }
}
</script>   

<style scoped>
.num{
    position: absolute;
    color: #fff;
    font-size: 70px;
    z-index: 32;
    top: 54%;
    left: 30%;
}	
</style>

二、 Canvas

靜下心實現(xiàn)了canvas描繪的儀表盤，并且數(shù)據(jù)不會從0開始渲染。

1. 先來canvas的老三樣

<canvas id="progress" width="600" height="600"></canvas>

<script>
	// 獲取canvas元素和上下文
	var canvas = document.getElementById("progress");
	var ctx = canvas.getContext("2d");
</script>

2. 設置一些基本參數(shù)

<canvas id="progress" width="600" height="600"></canvas>

<script>
	// 獲取canvas元素和上下文
	var canvas = document.getElementById("progress");
	var ctx = canvas.getContext("2d");

	// 圓環(huán)參數(shù)
	var x = canvas.width / 2;
	var y = canvas.height / 2;
	var radius = 176;
	var lineWidth = 10;
	var startAngle = (3 * Math.PI) / 4;  //相當于從鐘表中的差不多7點開始
	var endAngle = -Math.PI / 4;         //相當于從鐘表中的差不多5點結(jié)束
</script>

3. 繪制圓環(huán)及外面的進度條

// 繪制圓環(huán)進度條函數(shù)
function drawProgress(progress) {
	// 清除畫布
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// 繪制背景圓環(huán)
	ctx.beginPath();
	ctx.arc(x, y, radius, startAngle, Math.PI / 4);
	ctx.lineWidth = lineWidth;
	ctx.strokeStyle = "#008000";
	ctx.stroke();

	// 繪制進度圓環(huán)
	endAngle = startAngle + ((3 * Math.PI / 2) * progress);
	ctx.beginPath();
	ctx.arc(x, y, radius, startAngle, endAngle);
	ctx.lineWidth = lineWidth;
	ctx.strokeStyle = "#ff0000";
	ctx.stroke();
}

drawProgress(0.2)

4. 繪制里面的刻度條

function drawTicks() {
	var numTicks = 50; // 刻度數(shù)量
	var tickLength = 8; // 刻度長度
	var tickColor = "#000000"; // 刻度顏色
	var tickWidth = 2; // 刻度寬度

	let startAngle = (3 * Math.PI) / 4;
	let endAngle = -(1.48 * Math.PI) / 2;

	var angleStep = -((endAngle - startAngle) / numTicks); // 每個刻度之間的角度差

	ctx.save(); 

	// 將原點移到圓心處
	ctx.translate(x, y);


	// 繪制刻度
	for (var i = 0; i <= numTicks; i++) {
		var angle = startAngle + (i * angleStep) + 0.01;
		if (i % 5 == 0) {
			tickWidth = 5;
		} else {
			tickWidth = 2;
		}
		ctx.beginPath();
		ctx.lineWidth = tickWidth;
		ctx.strokeStyle = tickColor;

		// 計算刻度起點和終點的坐標
		var startX = (radius - tickLength - 4) * Math.cos(angle);
		var startY = (radius - tickLength - 4) * Math.sin(angle);
		var endX = (radius - 4) * Math.cos(angle);
		var endY = (radius - 4) * Math.sin(angle);


		// 繪制刻度線段
		ctx.moveTo(startX, startY);
		ctx.lineTo(endX, endY);
		ctx.stroke();

		// 繪制時間文本
		var text = i % 5 == 0 ? (i * 2).toString() : '';
		var textX = (radius - tickLength - 20) * Math.cos(angle);
		var textY = (radius - tickLength - 20) * Math.sin(angle);
		ctx.font = "16px Arial";
		ctx.fillStyle = "#000000";
		ctx.textAlign = "center";
		ctx.textBaseline = "middle";
		ctx.fillText(text, textX, textY);
	}

	ctx.restore(); // 恢復之前的繪圖狀態(tài)
}

5. 繪制指針

這一段可以抽離出來一個方法，等有時間再改一下

let kedu = (((2.4) * 2) / 100);  //我的起始角度0的位置旋轉(zhuǎn)角度是從-2.4到2.4
let rotate1 = (2.4 - (kedu * progress * 100));
if (progress < 0.5) {
	rotate1 = -rotate1;
} else {
	rotate1 = -rotate1;
}
ctx.save();
ctx.translate(x, y);
ctx.rotate(rotate1);
ctx.beginPath();
ctx.moveTo(x - (2 * radius) + 50, y - (2 * radius) + 60);
ctx.lineTo(x - (2 * radius) + 40, y - (2 * radius) + 46);
ctx.lineTo(x - (2 * radius) + 50, y - (2 * radius) - 70);
ctx.lineTo(x - (2 * radius) + 60, y - (2 * radius) + 46);
ctx.fillStyle = "#ff0000";
ctx.fill();
ctx.restore();

6. 繪制文本顯示當前的值

function drawText(value){
	ctx.font = "40px Arial";
	ctx.fillStyle = "#000000";
	ctx.fillText((value*100).toFixed(2)+'%', x-60, y+42);
}

完成~

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue mint-ui tabbar變組件使用
這篇文章主要介紹了vue mint-ui tabbar變組件使用方法及實例代碼，非常不錯具有參考借鑒價值,需要的朋友可以參考下
2018-05-05
vue3深入學習?nextTick和historyApiFallback
這篇文章主要介紹了vue3深入學習?nextTick和historyApiFallback，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-08-08
Vue偵聽器:watch與watchEffect的區(qū)別與使用
watch 和 watchEffect 都是 Vue 中用于偵聽響應式數(shù)據(jù)變化的工具,但它們的依賴追蹤方式、執(zhí)行時機和使用場景有顯著區(qū)別, 下面就來詳細的介紹一下,感興趣的可以了解一下
2026-02-02
深入了解Vue Pinia持久化存儲二次封裝
Pinia 是2019年由vue.js官方成員重新設計的新一代狀態(tài)管理庫,類似Vuex,下面我們就來學習一下如何通過Pinia實現(xiàn)持久化存儲的相關知識,感興趣的小伙伴可以了解下
2023-12-12
在Vue項目中使用自定義字體的操作步驟
在項目中使用自定義字體可以提升頁面的視覺效果,并確保在不同設備上的一致性,文中通過代碼示例給出了具體的操作步驟,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-06-06
Element?UI?table參數(shù)中的selectable的使用及遇到坑
這篇文章主要介紹了Element?UI?table參數(shù)中的selectable的使用及遇到的坑，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實現(xiàn)思路大概是通過props將showCancel這個Boolean值傳遞到子組件，對父子組件分別綁定事件，來控制這個系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下
2018-05-05
基于Vue如何封裝分頁組件
使用Vue做雙向綁定的時候，可能經(jīng)常會用到分頁功能，接下來通過本文給大家分享一個封裝分頁組件的方法，一起看看吧
2016-12-12
vue3?elementPlus?table實現(xiàn)列寬可拖拽功能
這篇文章主要介紹了vue3?elementPlus?table實現(xiàn)列寬可拖拽功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
Vue?ECharts實現(xiàn)機艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實現(xiàn)機艙座位選擇展示,本文給大家分享一段簡短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下
2022-05-05