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">
<title>Canvastitle>
head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
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 = $$('can');
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 Drawscaleline(yuanxinx,yuanxiny, banjing, kaishijd, jieshujd, dengfen, yanse)
{
var can = $$('can');
var cans = can.getContext('2d');
for (var i=0;i90)
x1 = x1 +10;
else
x1 = x1-18;
y1 = yuanxiny - banjing *Math.sin((jiaodu * 3.14)/180.0);
cans.fillText(text,x1,y1);
}
function load()
{
var can = $$('can');
var banjing = (can.width/2);
var yuanxinx = can.width/2;
var yuanxiny = can.height/2;
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');
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 pageLoad1(){
var myCanvas = document.getElementById("can");
var context = myCanvas.getContext("2d");
var wise = true;
context.lineWidth = 3;
context.strokeStyle = "blue";
context.fillStyle = "red";
for(var i=1;i<5;i++)
{
for(var j=1;j<4;j++)
{
context.beginPath();
context.arc(j*100,i*100,40,0,j*2/3*Math.PI,wise);
if(1 == i||3 == i)
context.stroke();
else
context.fill();
wise = !wise;
}
}
}
script>
<body οnlοad="load();">
<canvas id="can" width="280px" height="480px">canvas>
body>
html>
没事用html5 canvas画一个仪表盘自用，自适应的哦
转载于:https://www.cnblogs.com/bdccloudy/p/7665272.html