<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仪表盘</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> </head> <style type="text/css"> body{margin:20px auto; padding:0; 800px; } /*canvas{border:dashed 2px #CCC}*/ </style> <script type="text/javascript"> var canid; function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$(canid); var cans = can.getContext('2d'); cans.beginPath(); cans.arc(400,300,180,-10,0,false); //cans.closePath(); cans.strokeStyle = 'red'; cans.fillStyle = "blue"; cans.lineWidth = 30; cans.stroke(); cans.beginPath(); cans.arc(400,300,90,0,4/3*Math.PI,true); //cans.closePath(); cans.strokeStyle = 'red'; cans.fillStyle = "blue"; cans.lineWidth = 10; cans.fill(); //cans.beginPath(); //cans.arc(400,300,90,0,Math.PI,2); //cans.closePath(); //cans.strokeStyle = 'blue'; //cans.lineWidth = 80; //cans.stroke(); } function pageLoad2(a,b,c,d,e,f,g){ var can = $$(canid); var cans = can.getContext('2d'); cans.beginPath(); cans.arc(a,b,c,d,e,f); cans.strokeStyle = g; cans.fillStyle = g; cans.lineWidth = 30; cans.stroke(); cans.font = "bold 30px Arial"; cans.fillStyle = g; } function Drawarc(yuanxinx,yuanxiny, banjing, value, dengfen){ var can = $$(canid); var cans = can.getContext('2d'); cans.beginPath(); cans.arc(yuanxinx,yuanxiny,banjing,(Math.PI*2)*(180/360),(Math.PI*2)*(((180/dengfen)*value+178)/360),false); var yanse; if (value<=7) yanse = '#81d135'; if (value>7 && value<=14) yanse = '#fdc159'; if (value>14) yanse = '#fb6376'; cans.strokeStyle = yanse; cans.fillStyle = yanse; cans.lineWidth = 2; cans.stroke(); cans.font = "bold 30px Arial"; cans.fillStyle = yanse; } function Square(x) { return x*x; } function DrawLine(x1,y1,x2,y2) { var can = $$(canid); var cans = can.getContext('2d'); cans.strokeStyle='#000'; cans.lineWidth=1; //cans.lineCap='square'; cans.beginPath(); cans.moveTo(x1,y1); cans.lineTo(x2,y2); cans.stroke(); //cans.closePath(); } function Drawarc1(yuanxinx,yuanxiny, banjing, value, dengfen){ var can = $$(canid); var cans = can.getContext('2d'); cans.beginPath(); var jiaodu = 180 - (180/dengfen)*value; var jiaodu1 = jiaodu-1.8; var jiaodu2 = jiaodu+1.8; var x1 = yuanxinx + banjing * Math.cos((jiaodu * 3.14)/180.0); var y1 = yuanxiny - banjing * Math.sin((jiaodu * 3.14)/180.0); var jiaodian1x = yuanxinx + banjing * Math.cos((jiaodu1 * 3.14)/180.0); var jiaodian1y = yuanxiny - banjing *Math.sin((jiaodu1 * 3.14)/180.0); var jiaodian2x = yuanxinx + banjing * Math.cos((jiaodu2 * 3.14)/180.0); var jiaodian2y = yuanxiny - banjing *Math.sin((jiaodu2 * 3.14)/180.0); //缩短短半径 //alert(x1 +','+ y1); var sdbanjing = banjing -20; var jiaodian3x = yuanxinx + sdbanjing *Math.cos((jiaodu * 3.14)/180.0); var jiaodian3y = yuanxiny - sdbanjing *Math.sin((jiaodu * 3.14)/180.0); var jcbanjing = banjing +6; var jiaodian4x = yuanxinx + jcbanjing *Math.cos((jiaodu * 3.14)/180.0); var jiaodian4y = yuanxiny - jcbanjing *Math.sin((jiaodu * 3.14)/180.0); //alert(jiaodian3x +','+ jiaodian3y); DrawLine(jiaodian1x,jiaodian1y, jiaodian3x, jiaodian3y); DrawLine(jiaodian2x,jiaodian2y, jiaodian3x, jiaodian3y); //DrawLine(jiaodian1x,jiaodian1y, jiaodian4x, jiaodian4y); //DrawLine(jiaodian2x,jiaodian2y, jiaodian4x, jiaodian4y); cans.arc(x1,y1,4,0,Math.PI*2,false); var yanse; if (value<=7) yanse = '#81d135'; if (value>7 && value<=14) yanse = '#fdc159'; if (value>14) yanse = '#fb6376'; cans.strokeStyle = yanse; cans.fillStyle = yanse; cans.lineWidth = 2; cans.stroke(); //(a^2 + c^2 - b^2) / (2·a·c) var jiajiao = Math.round( Math.acos( (Square(banjing)+ Square(banjing) - Square(4)) / (2*banjing*banjing) ) * 180/Math.PI ); //alert(jiajiao); } function Drawscaleline(yuanxinx,yuanxiny, banjing, kaishijd, jieshujd, dengfen, yanse) { var can = $$(canid); var cans = can.getContext('2d'); for (var i=0;i<dengfen;i++) { dfjd = ((jieshujd - kaishijd)/dengfen)*i; cans.beginPath(); cans.arc(yuanxinx,yuanxiny,banjing, (Math.PI*2)*((kaishijd+dfjd)/360),(Math.PI*2)*((kaishijd+dfjd+1)/360),false); cans.strokeStyle = yanse; cans.lineWidth = 20; cans.stroke(); } } function DrawText(yuanxinx,yuanxiny, banjing, jiaodu, text, g) { var can = $$(canid); var cans = can.getContext('2d'); cans.font = "bold 10px Arial"; cans.strokeStyle = g; cans.fillStyle = g; var jcbanjing = banjing -15; x1 = yuanxinx + jcbanjing * Math.cos((jiaodu * Math.PI)/180.0); //if (jiaodu>90) // x1 = x1 +10; //else // x1 = x1-18; y1 = yuanxiny - jcbanjing *Math.sin((jiaodu * Math.PI)/180.0); cans.fillText(text,x1,y1); } function dashboard(id) { canid = id; var can = $$(canid); var banjing = (can.width/2); var yuanxinx = can.width/2; var yuanxiny = can.height; var cans = can.getContext('2d'); pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(180/360),(Math.PI*2)*(240/360),false,'#81d135'); pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(240/360),(Math.PI*2)*(300/360),false,'#fdc159'); pageLoad2(yuanxinx,yuanxiny,banjing-40,(Math.PI*2)*(300/360),(Math.PI*2)*(360/360),false,'#fb6376'); Drawscaleline(yuanxinx,yuanxiny,banjing-40,180,240,6, '#6db52b'); Drawscaleline(yuanxinx,yuanxiny,banjing-40,240,300,6, '#f4bd5f'); Drawscaleline(yuanxinx,yuanxiny,banjing-40,300,361,6, '#ef5469'); Drawarc(yuanxinx,yuanxiny,banjing-62,12,21); Drawarc1(yuanxinx,yuanxiny,banjing-62,12,21); DrawText(yuanxinx,yuanxiny,banjing,180, '0', '#81d135'); DrawText(yuanxinx,yuanxiny,banjing,120, '7', '#fdc159'); DrawText(yuanxinx,yuanxiny,banjing,60, '14', '#fdc159'); DrawText(yuanxinx,yuanxiny,banjing,0, '21', '#fb6376'); //cans.scale(0.2, 0.2); } function load() { dashboard('can'); dashboard('can1'); } </script> <body onload="load();" style="100%"> <canvas id="can" width="414px" height="310px"></canvas> <canvas id="can1" width="414px" height="310px"></canvas> </body> </html>