canvas写仪表盘
electricity.html
电压电流表
20W
A电流表
180
A连接状态
150
20W
B电流表
180
B连接状态
150
20W
C电流表
180
C连接状态
180
20W
A电压表
180
A连接状态
120
20W
B电压表
180
B连接状态
121
20W
B电压表
123
B连接状态
190
electricity.js这里需要注意的是指针的角度和度数
$(function () {
var winH = $(window).height();
$("body").height(winH * 765 / 765);
$("#perimeter").height(winH * 765 / 765);
$(".reaction").height(winH * 382 / 765);
$(".rtbtn").height(winH * 382 / 765);//右侧的按钮
var canvas1 = document.getElementById("meter_canvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.translate(0, 10);
var canvas2 = document.getElementById("meter_canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.translate(0, 10);
var canvas3 = document.getElementById("meter_canvas3");
var ctx3 = canvas3.getContext("2d");
ctx3.translate(0, 10);
var canvas4 = document.getElementById("meter_canvas4");
var ctx4 = canvas4.getContext("2d");
ctx4.translate(0, 10);
var canvas5 = document.getElementById("meter_canvas5");
var ctx5 = canvas5.getContext("2d");
ctx5.translate(0, 10);
var canvas6 = document.getElementById("meter_canvas6");
var ctx6 = canvas6.getContext("2d");
ctx6.translate(0, 10);
var img = new Image();
img.src = "img/zhizhen_03.png";
function circle(canvasId, photo) {
var canvas = document.getElementById(canvasId);
var borderwidth = 6;
var ctx = canvas.getContext("2d");
var degree = 0;
ctx.translate(144, 150);
ctx.rotate(-degree * Math.PI / 180);
ctx.save();
if (canvas.getContext) {
var circle = {
x: 0,//圆心的X坐标
y: 0,
r: 115 //圆的半径
};
//青色圈
ctx.beginPath();
ctx.lineWidth = borderwidth;
ctx.strokeStyle = "#2DC7C8";
ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, true);
ctx.stroke();
ctx.closePath();
//圆点
//ctx.beginPath();
//ctx.fillStyle = "#fff";
//ctx.arc(circle.x, circle.y, 2, 0, 2 * Math.PI, true);
//ctx.fill();
//ctx.closePath();
//写数字
for (var i = 0, angle = 2 * Math.PI / 2, tmp, len; i < 5; i++) {
ctx.beginPath();
//突出显示能被5整除的刻度
ctx.lineWidth = 3;
len = 25;
//刻度颜色
ctx.fillStyle = "#7D7D7D";
//圆有边框，要去除边框的高度
tmp = circle.r - 3;
ctx.moveTo(
circle.x + tmp * Math.cos(angle),
circle.y + tmp * Math.sin(angle)
);
tmp -= len;
//字体的设置
ctx.font = "16px Calibri";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(i * 50, circle.x + tmp * Math.cos(angle), circle.y + tmp * Math.sin(angle));
ctx.closePath();
angle += Math.PI /4 ;//每次递增5/30π //每个数字之间的距离
}
}
}
function circle2(canvasId, photo) {
var canvas = document.getElementById(canvasId);
var borderwidth = 6;
var ctx = canvas.getContext("2d");
var degree = 0;
ctx.translate(144, 150);
ctx.rotate(-degree * Math.PI / 180);
ctx.save();
if (canvas.getContext) {
var circle = {
x: 0,//圆心的X坐标
y: 0,
r: 115 //圆的半径
};
//青色圈
ctx.beginPath();
ctx.lineWidth = borderwidth;
ctx.strokeStyle = "#2DC7C8";
ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, true);
ctx.stroke();
ctx.closePath();
//写数字
for (var i = 0, angle = 2 * Math.PI / 2, tmp, len; i < 5; i++) {
ctx.beginPath();
//突出显示能被5整除的刻度
ctx.lineWidth = 3;
len = 25;
//刻度颜色
ctx.fillStyle = "#7D7D7D";
//圆有边框，要去除边框的高度
tmp = circle.r - 3;
ctx.moveTo(
circle.x + tmp * Math.cos(angle),
circle.y + tmp * Math.sin(angle)
);
tmp -= len;
//字体的设置
ctx.font = "16px Calibri";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(i * 105, circle.x + tmp * Math.cos(angle), circle.y + tmp * Math.sin(angle));
ctx.closePath();
angle += Math.PI / 4;//每次递增5/30π //每个数字之间的距离
}
}
}
//清除
var img = new Image();
img.src = "img/zhizhen_03.png";
function cleanpoint(canvasId, x, y) {
var canvas = document.getElementById("canvasId");
if (canvas.getContext("2d")) {
var ctx = canvas.getContext("2d");
ctx.clearRect(x, y, 72, 150);
context.drawImage(img, 0, 0);//绘制图片
}
}
var p1, p2, p3, p4, p5, p6;
var degrees=3/7;
function pointer1(angle) {
// alert(angle);
ctx1.clearRect(-5, 0, 20, -60);
ctx1.translate(0, 0);
ctx1.rotate((90 - 0.9 * p1) * Math.PI / 180);
ctx1.rotate((-90 + 0.9 * angle) * Math.PI / 180);
ctx1.clearRect(-5, 0, 50, 30);
ctx1.drawImage(img, 0 - 10, 0 - 62);//这里是指针的坐标，有时候旋转不是按照同一个点做旋转，需要调整位置
p1 = angle;
}
function pointer2(angle) {
ctx2.clearRect(-5, 0, 20, -60);
ctx2.translate(0, 0);
ctx2.rotate((90 - 0.9 * p2) * Math.PI / 180);
ctx2.rotate((-90 + 0.9 * angle) * Math.PI / 180);
ctx2.clearRect(-5, 0, 50, 30);
ctx2.drawImage(img, 0 - 10, 0 - 62);
p2 = angle;
}
function pointer3(angle) {
ctx3.clearRect(-5, 0, 20, -60);
ctx3.translate(0, 0);
ctx3.rotate((90 - 0.9 * p3) * Math.PI / 180);
ctx3.rotate((-90 + 0.9 * angle) * Math.PI / 180);
ctx3.clearRect(-5, 0, 50, 30);
ctx3.drawImage(img, 0 - 10, 0 - 62);
p3 = angle;
}
function pointer4(angle) {
ctx4.clearRect(-5, 0, 20, -60);
ctx4.translate(0, 0);
ctx4.rotate((90 - degrees * p4) * Math.PI / 180);
ctx4.rotate((-90 + degrees * angle) * Math.PI / 180);
ctx4.clearRect(-5, 0, 50, 30);
ctx4.drawImage(img, 0 - 10, 0 - 62);
p4 = angle;
}
function pointer5(angle) {
ctx5.clearRect(-5, 0, 20, -60);
ctx5.translate(0, 0);
ctx5.rotate((90 - degrees * p5) * Math.PI / 180);
ctx5.rotate((-90 + degrees * angle) * Math.PI / 180);
ctx5.clearRect(-5, 0, 50, 30);
ctx5.drawImage(img, 0 - 10, 0 - 62);
p5 = angle;
}
function pointer6(angle) {
ctx6.clearRect(-5, 0, 20, -60);
ctx6.translate(0, 0);
ctx6.rotate((90 - degrees * p6) * Math.PI / 180);
ctx6.rotate((-90 + degrees * angle) * Math.PI / 180);
ctx6.clearRect(-5, 0, 50, 30);
ctx6.drawImage(img, 0 - 10, 0 - 62);
p6 = angle;
}
//function numbox(canvasId, x, y, fillcolor, text) { //之所以不能这么写是因为在执行的时候执行了指针的方法，下面获取指针度数的方法也是canvas就不会再执行了，最好用div来写
// var c1 = document.getElementById(canvasId);
// var ctx = c1.getContext('2d');
// if (c1.getContext) {
// //盘下方的小方块
// ctx.beginPath();
// ctx.lineWidth = 1;
// ctx.strokestyle = '#2CC6C8';
// ctx.fillStyle = fillcolor;
// ctx.fillRect(x, y - 24, 66, 24);//方块的位置
// ctx.arc(x, y - 12, 12, 0.5 * Math.PI, 1.5 * Math.PI, false);
// ctx.fillStyle = '#2CC6C8';
// ctx.fill();
// ctx.closePath();
// ctx.beginPath();
// ctx.arc(x + 66, y - 12, 12, 0.5 * Math.PI, 1.5 * Math.PI, true);
// ctx.fillStyle = '#2CC6C8';
// ctx.fill();
// ctx.fillStyle = '#fff';
// ctx.font = '18px Microsoft YaHei';
// ctx.fillText(text, 130, 250 - 24);//字的位置
// ctx.stroke();
// ctx.closePath();
// }
//}
//盒子里面的文字
//function boxborder(canvasId, x, y, bordercolor) {
// var c1 = document.getElementById(canvasId);
// var ctx = c1.getContext('2d');
// if (c1.getContext) {
// //小方块里面的文字
// ctx.beginPath();
// ctx.strokeRect(x, y, 66, 28);
// ctx.strokeStyle = bordercolor;
// ctx.closePath();
// }
//}
var t = Math.random() * 3000 + 5000;
window.onload = function () {
setInterval(function () {
var num = Math.floor(Math.random() * 200 );
var num2 = Math.floor(Math.random() * 200);
var num3 = Math.floor(Math.random() * 200);
var num4 = Math.floor(Math.random() * 420);
var num5 = Math.floor(Math.random() * 420);
var num6 = Math.floor(Math.random() * 420);
pointer1(num);
pointer2(num2);
pointer3(num3);
pointer4(num4);
pointer5(num5);
pointer6(num6);
$("#degrees1").html(num + "W");
$("#degrees2").html(num2 + "W");
$("#degrees3").html(num3 + "W");
$("#degrees4").html(num4 + "W");
$("#degrees5").html(num5 + "W");
$("#degrees6").html(num6 + "W");
$("#water1").html(num);
$("#water2").html(num2);
$("#water3").html(num3);
$("#water4").html(num4);
$("#water5").html(num5);
$("#water6").html(num6);
}, 1000);
//电流
circle('meter_canvas1', "img/pointer.png");
pointer1(420);
circle('meter_canvas2', "img/pointer.png");
pointer2(200);//这里可以修改指针的度数
circle('meter_canvas3', "img/pointer.png");
pointer3(10);//这里可以修改指针的度数
//电压
circle2('meter_canvas4', 'img/pointer.png');
pointer4(0);//这里可以修改指针的度数
circle2('meter_canvas5', "img/pointer.png");
pointer5(120);//这里可以修改指针的度数
circle2('meter_canvas6', "img/pointer.png");
pointer6(60);//这里可以修改指针的度数
}
});
body{
width:100%;
height:100%;
background-color:#01143C;
}
#perimeter {
width: 100%;
}
* {
margin: 0;
padding: 0;
}
.check_title{
width:100%;
}
.check_title .ctitle{
border:2px solid #126F90;
width:16.38%;
}
.round_box{
width:100%;
}
/*每一块*/
.reaction{
width:32%;
float:left;
margin:0 auto;
}
.reaction:first-child{
margin-left:1%;
}
.reaction:nth-child(4){
margin-left:1%;
}
#meter_canvas1,#meter_canvas2,#meter_canvas3,#meter_canvas4,#meter_canvas5,#meter_canvas6{
width:60%;
float:left;
z-index:10;
position:relative;
margin-top:5%;
}
.rtbtn{
width:38%;
float:left;
text-align:center;
}
/*右侧的按钮*/
.rtbtn div{
width:80%;
height:36px;
line-height:36px;
margin:0 auto;
border:none;
color:#fff;
font-family:"Microsoft YaHei";
font-size:1em;
}
.rtbtn div:first-child{
margin-top:40%;
}
.rtbtn .status{
background-color:#123C6C;
margin-top:15%;
}
.rtbtn .monitor_result{
background-color:#1386D9;
}
.rtbtn img{
margin-top:3%;
}
上面js里面 var degrees=3/7; 90度是210W 那么1度就是90/210=3/7;
如果是以下这种情况：
0-50W是150度，那么 1度就是