利用畫布繪製柱狀圖
阿新 • • 發佈：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>