使用canvas绘制简单的仪表盘

最新推荐文章于 2024-05-09 09:54:41 发布
最新推荐文章于 2024-05-09 09:54:41 发布
阅读量1.4k 收藏 6
点赞数 1
分类专栏： H5 canvas js 文章标签： canvas js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38545849/article/details/110099913
版权
H5 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
canvas
1 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏

canvas绘制仪表盘
canvas绘制仪表盘
本案例简单的封装了一个仪表盘，用户可以在函数中传递仪表盘数据，刻度盘、颜色相关配置。
详细代码如下，可复制在html文档中浏览器直接运行

<!DOCTYPE html>
<body>
  <div>
    <h3>仪表盘1</h3>
    <canvas id="myCanvas1" width="900" height="300">
      你的浏览器不支持canvas,请升级你的浏览器
    </canvas>
    <h3>仪表盘2</h3>
    <canvas id="myCanvas2" width="900" height="300">
      你的浏览器不支持canvas,请升级你的浏览器
    </canvas>
  </div>
  <script>
    /* 绘制仪表盘样式1 */
			function initCanvasYbp1(opts = {}) {
				var canvasId = opts['id'] || 'myCanvas1'
				var data = opts['data'] || 100 // 值
				var center_data_font = '30px Arial'
				var formatStr = opts['formatStr'] || '/限55'
				var splitNumber = opts['splitNumber'] || 5 // 刻度数量
				var max = opts['max'] || 160 // 最大值
				var min = opts['min'] || 0 // 最小值
				var circle_width = 26 // 仪表盘边宽
				var startAngle = 0.8 // 开始角度
				var endAngle = 2.2 // 结束角度
				var splitColor = '#ffffff' // 刻度线颜色
				var splitWidth = 2 // 刻度线宽度
				var offset_split_text = opts['offsetSplitText'] || [-10, -10, -12, -20, -20] // 刻度文本偏移
				var split_text_font = '14rpx Arial'
				var circle = { // 定义圆
            x: 200,
            y: 150,
            radius: 100
				}


				var every_tick_rang = (max - min) / (splitNumber - 1)
				var splitVal = (data - min) / (max - min)
				var every_split_rang = (endAngle - startAngle) / (splitNumber - 1)
				
				var c = document.getElementById(canvasId);
				var contextCanvas = c.getContext("2d");

				// 绘制外环
				contextCanvas.save()
				contextCanvas.strokeStyle = "rgba(142,162,255, 0.2)"
				contextCanvas.lineWidth = circle_width
				contextCanvas.beginPath()
				contextCanvas.arc(circle.x, circle.y, circle.radius, startAngle * Math.PI, endAngle * Math.PI, false)
				contextCanvas.stroke()
				contextCanvas.closePath()
				contextCanvas.restore()

				// 绘制内环
				contextCanvas.save()
				contextCanvas.strokeStyle = '#3244FE'
				contextCanvas.lineWidth = circle_width
				contextCanvas.beginPath()
				contextCanvas.arc(circle.x, circle.y, circle.radius, startAngle * Math.PI, (0.8 + (1.4 * splitVal)) * Math.PI, false)
				contextCanvas.stroke()
				contextCanvas.restore()

				// 绘制刻度与刻度值
				// 绘制刻度射线
				var angleSplit = startAngle
				contextCanvas.strokeStyle = splitColor
				contextCanvas.lineWidth = splitWidth
				contextCanvas.save()
				contextCanvas.beginPath()
				for (var i = 0; i < splitNumber - 1; i ++) {
					// 刻度射线起始点
					var x0 = circle.x + (circle.radius - circle_width / 2) * Math.cos(angleSplit * Math.PI)
					var y0 = circle.y + (circle.radius - circle_width / 2) * Math.sin(angleSplit * Math.PI)
					// 刻度射线终点
					var x1 = circle.x + (circle.radius + circle_width / 2) * Math.cos(angleSplit * Math.PI)
					var y1 = circle.y + (circle.radius + circle_width / 2) * Math.sin(angleSplit * Math.PI)
					// 绘制刻度射线
					contextCanvas.moveTo(x0, y0)
					contextCanvas.lineTo(x1,y1)
					angleSplit += every_split_rang
				}
				contextCanvas.stroke()
				contextCanvas.closePath()
				contextCanvas.restore()

				// 绘制刻度文本
				var text = min
				var angleSplit_2 = startAngle
				contextCanvas.textAlign = 'center'
				contextCanvas.textBaseline = 'middle'
				contextCanvas.font = split_text_font
				contextCanvas.save()
				for (var i = 0; i < splitNumber; i ++) {
					// 刻度文本坐标点
					var xf = circle.x + (circle.radius - circle_width / 2 + offset_split_text[i]) * Math.cos(angleSplit_2 * Math.PI)
					var yf = circle.y + (circle.radius - circle_width / 2 + offset_split_text[i]) * Math.sin(angleSplit_2 * Math.PI)
					// 绘制刻度文本
					contextCanvas.fillText(text, xf, yf)
					text += every_tick_rang
					angleSplit_2 += every_split_rang
				}
				contextCanvas.stroke()
				contextCanvas.restore()

				// 绘制中间文本
				var centerText_X = circle.x
				var centerText_Y = circle.y
				contextCanvas.textAlign = 'center'
				contextCanvas.textBaseline = 'bottom'
				contextCanvas.font = center_data_font
				contextCanvas.fillStyle = 'rgba(50, 68, 254, 0.8)'
				contextCanvas.save()
				contextCanvas.fillText(data, centerText_X, centerText_Y)
				contextCanvas.fill()
				contextCanvas.restore()
			
			}
			
			initCanvasYbp1()
			
			function initCanvasYbp2 (opts = {}) {
				var canvasId = opts['id'] || 'myCanvas2'
				var data = opts['data'] || 200 // 值
				var center_data_font = '30px Arial'
				var splitNumber = opts['splitNumber'] || 41 // 刻度数量
				var max = opts['max'] || 800 // 最大值
				var min = opts['min'] || 0 // 最小值
				var circle_width = 26 // 仪表盘边宽
				var startAngle = 0.8 // 开始角度
				var endAngle = 2.2 // 结束角度
				var splitColor = opts['splitColor'] || 'rgb(255, 240, 181)' // 刻度线颜色
				var activeSplitColor = opts['activeSplitColor'] || 'rgba(254, 206, 10, 1)'
				var splitWidth = 4 // 刻度线宽度
				var offset_split_text = opts['offsetSplitText'] || [-30, -30, -30] // 刻度文本偏移
				var split_text_font = '14rpx Arial'
				var circle = { // 定义圆
          x: 200,
          y: 150,
          radius: 110
				}

				var every_tick_rang = (max - min) / 2
				var splitVal = (data - min) / (max - min)
				var every_split_rang = (endAngle - startAngle) / (splitNumber - 1)
				// 计算每一个刻度代表的数量
				var everyLineNumber = (max - min) / 41
				// 转义当前数据，符合仪表盘数据规范
				var dataCopy = data - min
				var c = document.getElementById(canvasId);
				var contextCanvas = c.getContext("2d");

				// 绘制刻度与刻度值
				// 绘制刻度射线
				var angleSplit = startAngle
				contextCanvas.lineWidth = splitWidth
				for (var i = 0; i < splitNumber; i ++) {
					if ((i * everyLineNumber) < dataCopy || (i * everyLineNumber) === dataCopy) {
						contextCanvas.strokeStyle = activeSplitColor
					} else {
						contextCanvas.strokeStyle = splitColor
					}
					contextCanvas.save()
					contextCanvas.beginPath()
					// 刻度射线起始点
					var x0 = circle.x + (circle.radius - circle_width / 2) * Math.cos(angleSplit * Math.PI)
					var y0 = circle.y + (circle.radius - circle_width / 2) * Math.sin(angleSplit * Math.PI)
					// 刻度射线终点
					var x1 = circle.x + (circle.radius + circle_width / 2) * Math.cos(angleSplit * Math.PI)
					var y1 = null
					if (i === Math.floor(splitNumber / 2)) {
						y1 = circle.y + (circle.radius + circle_width / 2 + 10) * Math.sin(angleSplit * Math.PI)
					} else {
						y1 = circle.y + (circle.radius + circle_width / 2) * Math.sin(angleSplit * Math.PI)
					}

					// 内环点
					// 刻度射线起始点
					var inx0 = circle.x + (circle.radius - circle_width / 2 - 14) * Math.cos(angleSplit * Math.PI)
					var iny0 = circle.y + (circle.radius - circle_width / 2 - 14) * Math.sin(angleSplit * Math.PI)
					// 刻度射线终点
					var inx1 = circle.x + (circle.radius + circle_width / 2 - 34) * Math.cos(angleSplit * Math.PI)
					var iny1 = circle.y + (circle.radius + circle_width / 2 - 34) * Math.sin(angleSplit * Math.PI)

					// 绘制刻度射线
					contextCanvas.moveTo(x0, y0)
					contextCanvas.lineTo(x1,y1)

					contextCanvas.moveTo(inx0, iny0)
					contextCanvas.lineTo(inx1,iny1)
					contextCanvas.stroke()
					contextCanvas.closePath()
					contextCanvas.restore()
					
					angleSplit += every_split_rang
				}

				// 绘制刻度文本
				var text = min
				var angleSplit_2 = startAngle
				contextCanvas.textAlign = 'center'
				contextCanvas.textBaseline = 'middle'
				contextCanvas.font = split_text_font
				contextCanvas.save()
				for (var i = 0; i < 3; i ++) {
					// 刻度文本坐标点
					var xf = circle.x + (circle.radius - circle_width / 2 + offset_split_text[i]) * Math.cos(angleSplit_2 * Math.PI)
					var yf = circle.y + (circle.radius - circle_width / 2 + offset_split_text[i]) * Math.sin(angleSplit_2 * Math.PI)
					// 绘制刻度文本
					contextCanvas.fillText(text, xf, yf)
					text += every_tick_rang
					angleSplit_2 += (endAngle - startAngle) / 2
				}
				contextCanvas.stroke()
				contextCanvas.restore()

				// 绘制中间文本
				var centerText_X = circle.x
				var centerText_Y = circle.y
				contextCanvas.textAlign = 'center'
				contextCanvas.textBaseline = 'bottom'
				contextCanvas.font = center_data_font
				contextCanvas.fillStyle = '#000000'
				contextCanvas.save()
				contextCanvas.fillText(data, centerText_X, centerText_Y)
				contextCanvas.fill()
				contextCanvas.restore()

			}
			
			initCanvasYbp2()
      

  </script>
</body>
qq_38545849
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas绘画仪表盘效果
zhou13528482267的博客
12-18 604
一、仪表盘效果： 2、代码逻辑 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制仪表盘</title> <style> body { background: #969696; } </style> </head> <body> <canva
【Python】PyQt5 使用QPainter绘制简易仪表盘
qq_43950000的博客
11-12 5228
使用QPainter 制作简易仪表盘，绘制三色环、刻度线、刻度值、指针等。
纯JS+Vue和canvas实现一个仪表盘
为了皮肤，争取早日到Lv4。
07-31 3073
【代码】纯JS+Vue实现一个仪表盘。
高度可配置的HTML5 Canvas仪表盘 - HTML Canvas Gauges v2.1
最新发布
gitblog_00026的博客
05-09 358
高度可配置的HTML5 Canvas仪表盘 - HTML Canvas Gauges v2.1 项目地址:https://gitcode.com/Mikhus/canvas-gauges 项目介绍 HTML Canvas Gauges是一个轻量级的JavaScript库，它利用HTML5的Canvas API来创建高度可定制的仪表盘组件。这个项目以其最小化代码基础为亮点，特别适合于物联网(IoT)...
View系列 : View项目：汽车仪表盘，圆盘
C++ JAVA的专栏
03-28 3569
1：汽车仪表盘 2 ：效果分解 汽车 仪表盘
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
thj13896076523的博客
02-08 1442
因为动画效果比较消耗性能，所以进度条单独canvas绘制
canvas绘制仪表盘
11-24
用原生canvas绘制仪表盘，代码简单，参数可传递。本代码既可以用于学习canvas，也可以用于项目中。
H5 Canvas百分比仪表盘特效
07-24
H5 Canvas百分比仪表盘特效是一款基于HTML5 Canvas绘制的圆形仪表盘动画特效。
Html5 Canvas绘制圆形仪表盘动画特效.zip
11-03
Html5 Canvas绘制圆形仪表盘动画特效.zip
仪表盘canvas动效
03-04
仪表盘动画，8个色块。包含仪表盘加载，闪烁动效，最后命中高亮色块。
小程序中使用echarts，案例一：实现仪表盘
qq_45290368的博客
12-26 957
小程序中使用echarts，案例一：实现仪表盘
canvas仪表盘
12-21
canvas仪表盘，模仿淘宝信用评级仪表盘
HTML5Canvas仪表
08-10
HTML5 Canvas 仪表
html5 canvas绘制环形进度条，环形渐变色仪表图
weixin_33907511的博客
10-11 712
html5 canvas绘制环形进度条，环形渐变色仪表图 在绘制圆环前，我们需要知道canvasarc()方法。 一：绘制环形进度条 <canvas id="myCanvas1" data-percent="60"> 您的浏览器不支持canva...
Canvas绘制一个类似老版支付宝信用分仪表盘效果
weixin_33836874的博客
03-30 265
前言 使用了ESM+TS的风格来写一个类似老版本支付宝信用分的效果(会动!!!)； 一开始用的是普通的ES5+的风格来写，这两版的代码都会展示， 模块的版本增加了一些细节的考虑，有兴趣的看官可以看看 效果图及Demo 具体的效果图可以在Codesanbox上看 Codesanbox : codesandbox.io/s/4rvo5mwxj… 具体的亮点可以看README Github: githu...
仪表盘动画
weixin_43998944的博客
11-17 1170
仪表盘动画 小程序中使用到了仪表盘动画，在小程序上使用方式是采用canvas 去绘制的，canvas 绘制是需要一定时间， 并且绘制出来的图在华为p30 p40 上有很大概览的适配性问题，后期需要使用h5 开发相同功能 ， 果断抛弃了canvas 采用了css 来实现了仪表盘动画 效果图 实现思路 1、让ui给一张底部为透明的刻度图片， 绝对定位 ， 设置z-index 值 2、准备个盒子相同与刻度图片相同宽高的绝对定位叠到刻度图片上 3、通过css3的旋转属性，旋转以便达到变色的效果 4、计算旋转角度，
canvas 绘制仪表盘
m0_37327931的博客
08-18 1188
Title #my-canvas{ width: 100%; height: 11rem; } function getP
Canvas---Canvas绘制钟表，仪表盘
MIKUScallion的专栏
01-29 6545
Canvas绘制钟表，仪表盘。 《HTML5 Canvas核心技术》这本书在代码方面，没有丝毫注解，我感觉看的挺费劲，如果你想买书的话，最好还是先下本pdf看看吧。 下面是表盘的绘制图解 函数顺序是按照上图的顺序来写的，最后我为仪表加上了样式。 源代码： canvas{ bord
使用html绘制一个仪表盘
02-07
然后，您可以使用 JavaScript 来获取这个 `<canvas>` 元素，并在其中绘制仪表盘。这里是一个简单的示例，展示了如何绘制一个简单的仪表盘： ```javascript const canvas = document.getElementById('myCanvas'); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值