![[傲慢]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_23.27eb25d.png)
你是傻蛋
摸鱼工程师
获得徽章 8
赞了这篇沸点
使用canvas画一个仪表盘
使用 HTML5 的 `<canvas>` 元素可以绘制一个简单的仪表盘。下面是一个基本的示例，展示了如何使用 Canvas API 绘制一个仪表盘，包括刻度和指针。
### HTML 结构
```html
<canvas id="dashboard" width="400" height="400"></canvas>
<script src="dashboard.js"></script>
```
### JavaScript 代码
```javascript
// dashboard.js
const canvas = document.getElementById('dashboard');
const ctx = canvas.getContext('2d');
// 绘制仪表盘背景
function drawDashboard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 圆形背景
ctx.beginPath();
ctx.arc(200, 200, 150, 0, Math.PI * 2);
ctx.fillStyle = '#eee';
ctx.fill();
ctx.stroke();
// 刻度
for (let i = 0; i < 12; i++) {
const angle = (i * Math.PI) / 6; // 每个刻度间隔 30 度
const x1 = 200 + Math.cos(angle) * 130; // 刻度外圈
const y1 = 200 + Math.sin(angle) * 130;
const x2 = 200 + Math.cos(angle) * 150; // 刻度内圈
const y2 = 200 + Math.sin(angle) * 150;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
使用 HTML5 的 `<canvas>` 元素可以绘制一个简单的仪表盘。下面是一个基本的示例，展示了如何使用 Canvas API 绘制一个仪表盘，包括刻度和指针。
### HTML 结构
```html
<canvas id="dashboard" width="400" height="400"></canvas>
<script src="dashboard.js"></script>
```
### JavaScript 代码
```javascript
// dashboard.js
const canvas = document.getElementById('dashboard');
const ctx = canvas.getContext('2d');
// 绘制仪表盘背景
function drawDashboard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 圆形背景
ctx.beginPath();
ctx.arc(200, 200, 150, 0, Math.PI * 2);
ctx.fillStyle = '#eee';
ctx.fill();
ctx.stroke();
// 刻度
for (let i = 0; i < 12; i++) {
const angle = (i * Math.PI) / 6; // 每个刻度间隔 30 度
const x1 = 200 + Math.cos(angle) * 130; // 刻度外圈
const y1 = 200 + Math.sin(angle) * 130;
const x2 = 200 + Math.cos(angle) * 150; // 刻度内圈
const y2 = 200 + Math.sin(angle) * 150;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
展开
7
4
赞了这篇沸点
![[大笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_55.74ed629.png)
![[嘴唇]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_105.3881f71.png)
![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
赞了这篇沸点
两个月摩旅半个中国1w6k公里，终于到家了，给摸鱼的jym来点辞职的动力![[不失礼貌的微笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
P1温州的百丈祭（让一位退伍兵哥哥拍的），P2海南的3000米跳伞，P3原图直出的羊湖，P4羊湖边上堆的玛尼堆，P5 P9是一路上认识认识的五湖四海的摩友，可以根据P6对应相应的名字，有贵阳的，湖南怀化的，洛阳的，安徽的，成都的（那张画真的很暖，一路上认识的朋友和经历的事也是很值得回味的），P7是梅里雪山的日照金山（去的当天晚上老板还说一个月不一定见得到，冬天更容易见到），就这样啦，草原的牛马又要回上海当牛马了，当然大理也是很舒服的，在苍山洱海边一坐就是一天，可惜只能九张图哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，看到这条的加油摸鱼哦xdm
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
P1温州的百丈祭（让一位退伍兵哥哥拍的），P2海南的3000米跳伞，P3原图直出的羊湖，P4羊湖边上堆的玛尼堆，P5 P9是一路上认识认识的五湖四海的摩友，可以根据P6对应相应的名字，有贵阳的，湖南怀化的，洛阳的，安徽的，成都的（那张画真的很暖，一路上认识的朋友和经历的事也是很值得回味的），P7是梅里雪山的日照金山（去的当天晚上老板还说一个月不一定见得到，冬天更容易见到），就这样啦，草原的牛马又要回上海当牛马了，当然大理也是很舒服的，在苍山洱海边一坐就是一天，可惜只能九张图哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，看到这条的加油摸鱼哦xdm
展开
77
108
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)