利用畫布繪製柱狀圖
阿新 • • 發佈:2018-12-16
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>柱狀圖</title> <style>/*繪製畫布的樣式*/ canvas{ background-color: rgb(243,243,243); } </style> </head> <body> <canvas width="800px" height="500px"></canvas><!--繪製一個畫布--> <script> // 獲取畫布物件和畫布工具 var maycanvas=document.querySelector("canvas"); var ctx=maycanvas.getContext("2d"); // 動態獲取畫布的寬和高 var canvasW=ctx.canvas.width; var canvasH=ctx.canvas.height; // 定義變數 var unm=50; // 繪製x,y軸 ctx.moveTo(unm,unm); ctx.lineTo(unm,canvasH-unm); ctx.lineTo(canvasW-unm,canvasH-unm) ctx.strokeStyle="#000000"; ctx.stroke(); // 繪製y軸突出部位和下標 for(i=0;i<5;i++){ ctx.moveTo(unm,canvasH-unm-i*100); ctx.lineTo(unm-10,canvasH-unm-i*100) ctx.strokeStyle="#000000"; ctx.stroke(); ctx.fillText(i*100,unm-30,canvasH-unm-i*100) } // 繪製x軸和下標 for(i=1;i<7;i++){ ctx.moveTo(unm+40+80*i,canvasH-unm); ctx.lineTo(unm+40+80*i,canvasH-unm+10); ctx.strokeStyle="#000000"; ctx.stroke(); } // 繪製柱形 ctx.beginPath(); ctx.moveTo(unm+40,canvasH-unm); ctx.lineTo(unm+40,canvasH-unm+10); ctx.strokeStyle="#000000"; ctx.stroke(); var arr=[20,70,200,330,390,320,230]; for(i=0;i<8;i++){ ctx.fillStyle="rgb(51,152,219)"; ctx.rect(unm+20+80*i, canvasH-unm-arr[i],40,arr[i]); ctx.fill(); } //新增下面的字 var zi=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"] ctx.beginPath(); for(i=0;i<zi.length;i++){ ctx.fillText(zi[i],80+i*80,canvasH-30) } </script> </body>