Canvas绘制仪表盘

效果如图

代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

function init(xwidth) {

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.strokeStyle = "#00D2D2";

canvas.width = xwidth;

canvas.height = xwidth;

ctx.translate(xwidth/2, xwidth/2);

ctx.save();

ctx.rotate(9 * Math.PI / 32);//选确定图片具体的弧度，超过180的的弧度除于二两边平均分配

for (var i = 0; i <= 50; i++) {

ctx.beginPath();

ctx.lineWidth = 2;

ctx.strokeStyle = 'rgba(0, 210, 210, 1)';

ctx.moveTo(130, 0);

ctx.lineTo(120, 0);

ctx.stroke();

//每个点的弧度,360°弧度为2π,即旋转弧度为 2π / 75

ctx.rotate(-1 * Math.PI / 32);

}

ctx.restore();

// 内环刻度线

ctx.save();

ctx.lineWidth = 2;

ctx.rotate(9 * Math.PI / 32);

for (var i = 0; i <= 5; i++) {

ctx.beginPath();

ctx.lineWidth = 2;

ctx.strokeStyle = 'rgba(0, 210, 210, 1)';

ctx.moveTo(140, 0);

ctx.lineTo(120, 0);

ctx.stroke();

//每10个点分一个刻度,共5个刻度,旋转角度为deg1 * 10

ctx.rotate(-10 * Math.PI / 32);

}

ctx.restore();

}

function drewing(data,R,R1,color0, color1){

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.save();

ctx.beginPath();

// 创建渐变

var grd = ctx.createLinearGradient(-200, 0, 200, 0);

grd.addColorStop(0, color0);

grd.addColorStop(1, color1);

ctx.lineWidth = 1;

ctx.strokeStyle = grd;

// 填充渐变

ctx.fillStyle = grd;

ctx.lineStyle = grd;

ctx.rotate(23 * Math.PI / 32);

ctx.arc(0, 0, R+R1, 0, data * Math.PI / 32, false);

ctx.arc(0, 0, R, data * Math.PI / 32, 0, true);

ctx.lineTo(R + R1, 0)

ctx.arc(R + R1 / 2, 0, R1 / 2, 32 * Math.PI / 32, 0, false);

ctx.rotate((data - 64) * Math.PI / 32);

ctx.moveTo(R, 0);

ctx.arc(R + R1/2, 0, R1 / 2, 32 * Math.PI / 32, 0, true);

ctx.fill();

ctx.stroke();

ctx.restore();

}

init(400);

drewing(50, 70, 40, "rgba(35, 206, 253, 1)", "rgba(35, 206, 253, 1)");

drewing(10,70, 40, "#19CDCD", "#19CDCD");

</script>

</body>

</html>

--黑暗宇宙中的星云会不会下起雨！

posted @ 2021-03-13 15:42 星宇黑雨阅读(620) 评论(0) 收藏举报

刷新页面返回顶部

星宇黑雨

Canvas绘制仪表盘

公告