canvas，是一個(gè)H5的新標(biāo)簽，通過js來實(shí)現(xiàn)繪圖的神奇功能。
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
那么我們?cè)趺磥硎褂胏anvas標(biāo)簽?zāi)兀?/p>
<canvas width="800" height="600" id="context"></canvas>
注意，在這里我直接在行間設(shè)置了寬高，是因?yàn)槿舨辉O(shè)定寬高，瀏覽器會(huì)默認(rèn)設(shè)置canvas大小為寬300、高100像素，而且不能使用css來設(shè)置（會(huì)被拉伸），建議直接寫于canvas標(biāo)簽內(nèi)部，或者是直接用js腳本中來設(shè)置。如下：
<script>
var context = document.getElementById("myCanvas");
context .width=200;
context .height=200;
</script>
首先，獲取canvas的繪圖環(huán)境，這是一個(gè)封裝了很多繪圖功能的對(duì)象。
var gd =canvas.getContext("2d");
來舉個(gè)栗子
<script>
var oC=document.querySelector('#mycontext');
var gd =oC.getContext('2d'); //獲取該canvas的2D繪圖環(huán)境對(duì)象
gd .moveTo(10,10); //定義繪畫開始的位置
gd .lineTo(150,50); //畫一條直線，結(jié)束點(diǎn)坐標(biāo)是x=150,y=50
gd .strokeStyle='red'; //設(shè)定描邊顏色為紅色，要寫在.stroke()方法前面
gd .lineWidth=20; //設(shè)定描邊粗細(xì)為20，不要寫px
context.stroke(); //描邊,即繪制邊框
</script>
我們使用了幾個(gè)繪圖方法：
1.moveTo(x坐標(biāo) , y坐標(biāo)) 可以理解為定位畫筆在畫布上的位置
2.lineTo(x坐標(biāo) , y坐標(biāo)) 顧名思義，就是畫一條直線到某個(gè)點(diǎn)，此方法只做路徑運(yùn)動(dòng)，并沒有視覺上的效果。
3.stroke() 描邊方法 讓運(yùn)動(dòng)路徑從視覺上顯現(xiàn) 用 畫筆描出來
4.strokeStyle 設(shè)定顏色的方法 可以直接用顏色名稱，例如"red" "green",或者用十六進(jìn)制顏色"#fff",還有rgb(0-255,0-255,0-255)， rgba(0-255,0-255,0-255,透明度)。
栗子2 用canvas寫出兩個(gè)不一樣顏色的線 ：
<script>
var oC=document.querySelector('#mycontext');
var gd =oC.getContext('2d');
gd .moveTo(0,0);
gd .lineTo(150,50);
gd .lineTo(20,100);
gd .strokeStyle = "blue";
gd .stroke();
gd .beginPath();
gd .moveTo(90,90);
gd .lineTo(80,150);
gd .strokeStyle = "red";
gd .closePath();
gd .stroke();
</script>
關(guān)于路徑beginPath和closePath
1、系統(tǒng)默認(rèn)在繪制第一個(gè)路徑的開始點(diǎn)為beginPath
*2、如果畫完前面的路徑?jīng)]有重新指定beginPath，那么畫第其他路徑的時(shí)候會(huì)將前面最近指定的beginPath后的全部路徑重新繪制
ps：記住每次畫路徑都在前后加gd .beginPath() 和gd .closePath()
當(dāng)然canvas也可以繪制出各種圖形
栗子3 繪制矩形
<script>
window.onload= function () {
var oC=document.querySelector('#c1');
var gd=oC.getContext('2d');
gd.strokeStyle='red';//邊的顏色
gd.lineWidth=20; //邊的寬度
gd.fillStyle='green'; // 整個(gè)涂滿的顏色
gd.fillRect(100,100,200,300); //滿矩形（x矩形起點(diǎn)橫坐標(biāo)，y矩形起點(diǎn)縱坐標(biāo)，矩形寬度，矩形高度）
gd.strokeRect(100,100,200,300); //矩形
}
繪制矩形有兩個(gè)小方法：
1 context.fillRect(x,y,width,height) 所謂的滿矩形就是填充一個(gè)矩形
2 strokeRect(x,y,width,height) 繪制矩形（不填色）。筆觸的默認(rèn)顏色是黑色。
相反 清除矩形區(qū)域即為
context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
canvas更多有趣的東西，我們下次再講~~~
