基礎知識：canvas＆gt;

在頁面上創建一個canvas標簽，然后獲取canvas元素，因為它是一個2D繪圖，所以調用.getContext（'2d'）2D圖形方法

Var target=document.getElementById（'demo'），pic=target.getContext（'2d'）;

畫布繪圖的平面空間，空間的每個點都有自己的坐標，x代表橫坐標，y代表垂直坐標。原點（0,0）位于圖像的左上角，x軸的正方向是右邊的原點，y軸的正方向是原點向下。

部分API的介紹：　

pic.beginPath（）; //創建一個開始繪制路徑（每行需要重新創建一次，否則將來的操作[如填充顏色]將反映在此路徑中）pic.moveTo（0,0）; //繪制起點pic.lineTo（100,100）; //設置繪圖線的終點，你可以多次調用它（最后一個終點是起點，繼續繪制）pic.lineTo（240,340）; pic.lineWidth=1; //設置寬度圖片。 strokeStyle='＃259'; //設置顏色pic.stroke（）; //填寫pic.closePath（）; //關閉此路徑，可選

封裝：

繪圖路徑必須知道起點坐標和終點坐標，因為它可能被繪制多次，因此您需要使用二維數組來保存每個坐標，例如[[0,0]，[100， 50]，[2,50]]，然后遍歷二維數組并多次調用lineTo方法進行渲染。包功能如下：

//繪制線條函數drawContLine（opt）{pic.beginPath（）; var path=opt.path，//[[0,0]，[20,30] .] color=opt.color; pic.moveTo（路徑[0] [0]，路徑[0] [1]）; var n=1，len=path.length;為（; N

例子：月份成績分數對比曲線圖

完整代碼：

DOCTYPE html＆gt; DOCUMENTTITLE＆GT;標簽:＆amp; nbsp＆amp; nbsp沈陽網站建設＆amp; nbspMarketing 網站建設＆amp; nbsphtml5Development