<!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"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; padding:0; 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;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 = $$('can'); var cans = can.getContext('2d'); cans.font = "bold 10px Arial"; cans.strokeStyle = g; cans.fillStyle = g; x1 = yuanxinx + banjing * Math.cos((jiaodu * 3.14)/180.0); if (jiaodu>90) 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 onload="load();"> <canvas id="can" width="280px" height="480px"></canvas> </body> </html>