Canvas绘画仪表盘效果

最新推荐文章于 2024-04-23 14:35:16 发布

zhou13528482267

最新推荐文章于 2024-04-23 14:35:16 发布

阅读量604

点赞数

分类专栏：仪表盘前端文章标签： canvas

本文链接：https://blog.csdn.net/zhou13528482267/article/details/111356892

版权

一、仪表盘效果：

2、代码逻辑

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Canvas绘制仪表盘</title>
	<style>
		body {
			background: #969696;
		}
	</style>
</head>

<body>
	<canvas id="myCanvas" width="420" height="420" style="border: 1px red solid;">
		浏览器不支持HTML5 canvas标签
	</canvas>
	<script>
		let boundingRect = {
			cx: 210,
			cy: 210,
			width: 420,
			height: 420
		}
		// 画圆
		// Canvas对象：ctx
		// 圆心坐标: (x, y)
		// 半径: radius
		// 起始角度: startAngle
		// 结束角度: endAngle
		// 是否逆时针旋转: false 代表顺时针旋转
		// 画笔尺寸
		// 画笔颜色
		function drawCircle(ctx, x, y, radius, startAngle, endAngle, Boolean, size, color1, color2) {
			ctx.beginPath();//beginPath() 方法开始一条路径，或重置当前的路径。
			ctx.lineWidth = size;//画笔粗细
			ctx.arc(x, y, radius, startAngle, endAngle, Boolean);//路径
			let grd = ctx.createLinearGradient(0, y - radius, 0, y + radius);
			grd.addColorStop(0, color1);
			grd.addColorStop(1, color2);
			ctx.strokeStyle = grd;//画笔颜色
			// ctx.closePath();//结束路径
			ctx.stroke();//开始画
		}

		// 画内圆
		// Canvas对象：ctx
		// 圆心坐标: (x, y)
		// 半径: radius
		// 起始角度: startAngle
		// 结束角度: endAngle
		// 是否逆时针旋转: false 代表顺时针旋转
		// 画笔尺寸
		// 画笔颜色
		function drawInCi

最低0.47元/天解锁文章

zhou13528482267

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Canvas绘画仪表盘效果

一、仪表盘效果：2、代码逻辑<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas绘制仪表盘</title> <style> body { background: #969696; } </style></head><body> <canva
复制链接

扫一扫