基礎(chǔ)知識(shí)：canvas＆gt;

在頁面上創(chuàng)建一個(gè)canvas標(biāo)簽，然后獲取canvas元素，因?yàn)樗且粋€(gè)2D繪圖，所以調(diào)用.getContext（'2d'）2D圖形方法

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

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

部分API的介紹：　

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

封裝：

繪圖路徑必須知道起點(diǎn)坐標(biāo)和終點(diǎn)坐標(biāo)，因?yàn)樗赡鼙焕L制多次，因此您需要使用二維數(shù)組來保存每個(gè)坐標(biāo)，例如[[0,0]，[100， 50]，[2,50]]，然后遍歷二維數(shù)組并多次調(diào)用lineTo方法進(jìn)行渲染。包功能如下：

//繪制線條函數(shù)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

例子：月份成績(jī)分?jǐn)?shù)對(duì)比曲線圖

完整代碼：

DOCTYPE html＆gt; DOCUMENTTITLE＆GT;標(biāo)簽:＆amp; nbsp＆amp; nbsp沈陽網(wǎng)站建設(shè)＆amp; nbspMarketing 網(wǎng)站建設(shè)＆amp; nbsphtml5Development