一、繪制折線圖

1、首先，隨便定義一個數組對象代表坐標，然後繪出打底的網格線：

        <canvas width="600px" height="400px" ></canvas>
        <script>
            var mycanvas=document.querySelector("canvas");
            var pan=mycanvas.getContext("2d");
            var wid=mycanvas.width;
            var high=mycanvas.height;
            
 
var sz=[
                {
                    x:50,
                    y:300
                },
                {
                    x:150,
                    y:100
                },
                {
                    x:200,
                    y:200
                },
                {
                    x:
 
400,
                    y:300
                },
                {
                    x:500,
                    y:50
                }
            ]
            for (i=1;i<Math.floor(high/10);i++) {
                pan.moveTo(0,10*i+0.5);
                pan.lineTo(wid,10*i+0.5);
                pan.strokeStyle
 
="#eee";
                pan.stroke();
            }
            for (j=1;j<Math.floor(wid/10);j++) {
                pan.moveTo(10*j+0.5,0);
                pan.lineTo(10*j+0.5,high);
                pan.strokeStyle="#eee";
                pan.stroke();
            }

2、繪出x軸y軸：

            pan.beginPath();
            pan.moveTo(20,high-20);
            pan.lineTo(560,high-20);
            pan.lineTo(550,high-25);
            pan.lineTo(550,high-15);
            pan.lineTo(560,high-20);
            
            pan.moveTo(20,high-20);
            pan.lineTo(20,40);
            pan.lineTo(15,50);
            pan.lineTo(25,50);
            pan.lineTo(20,40);
            pan.strokeStyle="#000";
            pan.stroke();
            pan.fill();
            pan.fillText("X",570,high-20);
            pan.fillText("Y",20,30);
            

3、根據定義的坐標繪出相應的折線圖：

　　由於canvas原點跟我們定義的坐標原點有差距，繪圖的關鍵在於將定義的坐標換算成相對於canvas的坐標表示，找到準確的對應點。註意每個折點繪制小方塊的時候重新開始一個新路徑，不然會與已繪出的折線連在一起，影響本身應有的效果。

            pan.beginPath();
            var prevX = 20;
            var prevY = high-20;
            for (var m=0;m<sz.length;m++) {
                pan.moveTo(prevX,prevY);
                pan.lineTo(20+sz[m].x,high-20-sz[m].y);
                pan.rect(20+sz[m].x-2.5,high-20-sz[m].y-2.5,5,5);
                pan.fillStyle="blueviolet";
                pan.strokeStyle="blueviolet";
                pan.stroke();
                pan.fill();
                pan.fillText("("+sz[m].x+","+sz[m].y+")",20+sz[m].x,high-20-sz[m].y);
                prevX = 20+sz[m].x;
                prevY = high-20-sz[m].y;
            }
        </script>

二、繪制柱狀圖

1、與繪制折線圖相似，繪制打底網格，x軸y軸，根據數據換算成相對canvas的坐標，值得註意的是繪制柱狀矩形的時候留意矩形的起點坐標和方向、寬高，如有發現不對應的情況及時找出問題並修改。

        <canvas width="800px" height="500px" ></canvas>
        <script>
            var mycanvas=document.querySelector("canvas");
            var pan=mycanvas.getContext("2d");
            var wid=mycanvas.width;
            var high=mycanvas.height;
            var sz=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
            var sz2=[80,180,230,95,200,340,290];
            for (i=1;i<=Math.floor(high/100);i++) {
                pan.moveTo(50,80*i+0.5);
                pan.lineTo(wid-50,80*i+0.5);
                pan.strokeStyle="#eee";
                pan.stroke();
                pan.textAlign="right";
                pan.fillText(500-100*i,45,80*i+0.5)
            }
            pan.beginPath();
            pan.moveTo(50,400);
            pan.lineTo(750,400);
            pan.moveTo(50,400);
            pan.lineTo(50,78);
            pan.strokeStyle="#000";
            pan.stroke();
            for (j=0;j<7;j++) {
                pan.moveTo(100+90*j,400);
                pan.lineTo(100+90*j,405);
                pan.stroke();
                var mylinear=pan.createLinearGradient(100,400,100,20);
                mylinear.addColorStop(0,"#00f");
                mylinear.addColorStop(1,"#0f0");
                pan.rect(100+90*j-20,400-sz2[j],40,sz2[j]);
                pan.fillStyle=mylinear;
                pan.fill();
                pan.textAlign="center";
                pan.fillText(sz[j],100+90*j,420);
                pan.fillText(sz2[j],100+90*j,400-sz2[j]-10);
                pan.fillStyle="#000000";
            }

運用canvas繪折線圖和柱狀圖