?canvas繪制基本圖形，包括直線，矩形，圓等，復(fù)雜的圖形都是由簡單的圖形組合而成。
1.直線
（1）實(shí)現(xiàn)效果
圖1-1
（2）實(shí)現(xiàn)代碼
圖1-2
（3）附加知識
直線可以設(shè)置lineCap的值使直線兩端的樣式不同，"round" 和 "square" 會使線條略微變長：
1) butt默認(rèn)。向線條的每個末端添加平直的邊緣;
2) round向線條的每個末端添加圓形線帽;
3) square向線條的每個末端添加正方形線帽。
圖1-3
代碼：
otx.lineCap='butt';
otx.beginPath();//重置畫筆，避免污染
otx.moveTo(10, 10);//路徑起點(diǎn)（10,10）
otx.lineTo(180, 10);//路徑到達(dá)位置（180, 10）
otx.stroke();//開始繪制圖形
otx.lineCap='round';
otx.beginPath();//重置畫筆，避免污染
otx.moveTo(10, 30);//路徑起點(diǎn)（10,30）
otx.lineTo(180, 30);//路徑到達(dá)位置（180, 30）
otx.stroke();//開始繪制圖形
otx.lineCap='square';
otx.beginPath();//重置畫筆，避免污染
otx.moveTo(10, 50);//路徑起點(diǎn)（10, 50）
otx.lineTo(180, 50);//路徑到達(dá)位置（180, 50）
otx.stroke();//開始繪制圖形
