<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘制仪表盘</title>
<style>
body {
background: #2c3e50;
}
#myCanvas {
border: 1px red solid;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="420" height="420">
Your browser does not support the canvas element.
</canvas>
<script>
// 画圆
// Canvas对象:ctx
// 圆心坐标: (x, y)
// 半径: radius
// 起始角度: startAngle
// 结束角度: endAngle
// 是否逆时针旋转: false 代表顺时针旋转
// 画笔尺寸
// 画笔颜色
function drawCircle(ctx, x, y, radius, startAngle, endAngle, Boolean, size, color) {
ctx.beginPath();//beginPath() 方法开始一条路径,或重置当前的路径。
ctx.lineWidth = size;//画笔粗细
ctx.arc(x, y, radius, startAngle, endAngle, Boolean);//路径
ctx.strokeStyle = color;//画笔颜色
ctx.closePath();//结束路径
ctx.stroke();//开始画
}
//写文本
//字体样式:font("italic small-caps bold 12px arial")
//字体颜色:color("#ffffff")
//字体内容:content("我是书写内容")
//文字坐标:x,y
function drawText(ctx, font, color, content, x, y) {
ctx.font = font;
ctx.fillStyle = color;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(`${
content}`, x, y);
}
function drawGauge(
Canvas绘制仪表盘
最新推荐文章于 2024-06-26 09:54:01 发布