Canvas绘制仪表盘
效果如图
代码如下：
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");