一歉备、認(rèn)識Canvas
Canvas就是一個畫布，可以進(jìn)行畫任何的線磕洪、圖形吭练、填充等一系列的操作，而且操作的畫圖就是js析显，所以讓js編程到了嗑藥的地步鲫咽。另外Canvas不僅僅提供簡單的二維矢量繪圖签赃，也提供了三維的繪圖，以及圖片處理等一系列的api支持分尸。
二锦聊、Canvas的Context對象
1.要使用Canvas來繪制圖形必須在頁面中添加Canvas的標(biāo)簽。
<canvas id="demoCanvas" width="500" height="500">
<p>
請使用支持HTML5的瀏覽器查看本實(shí)例
</p>
</canvas>
2.只有上面的標(biāo)簽箩绍，只能是創(chuàng)建好了一個畫布孔庭，其中width和height屬性就是設(shè)置畫布的大小。Id屬性也是必須的材蛛，后面要用Id來拿到當(dāng)前的Canvas的Dom對象圆到。通過此Canvase的Dom對象就可以獲取他的上下文（Context）了，Canvas繪制圖形都是靠著Canvas對象的上下文對象卑吭。
<script type="text/javascript">
//第一步：獲取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：獲取上下文
var context = canvasDom.getContext('2d');
</script>
3.Context上下文默認(rèn)兩種繪制方式： 第一種：繪制線（stroke） 第二種：填充（fill）芽淡。
三、Canvas繪制立體透明矩形
1. Canvas繪制步驟：
- 創(chuàng)建HTML頁面豆赏，設(shè)置畫布標(biāo)簽挣菲。
- 編寫js，獲取畫布dom對象掷邦。
- 通過canvas標(biāo)簽的Dom對象獲取上下文白胀。
- 設(shè)置繪制樣式、顏色抚岗。
- 繪制矩形或杠，或者填充矩形。
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>請使用支持HTML5的瀏覽器查看本實(shí)例</p>
</canvas>
<!---下面將演示一種繪制矩形的demo--->
<script type="text/javascript">
//第一步：獲取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：獲取上下文
var context = canvasDom.getContext('2d');
//第三步：指定繪制線樣式苟跪、顏色
context.strokeStyle = "red";
//第四步：繪制矩形廷痘，只有線蔓涧。內(nèi)容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形件已。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
四、Canvas繪制線條
Context對象的beginPath方法表示開始繪制路徑元暴，moveTo(x, y)方法設(shè)置線段的起點(diǎn)篷扩，lineTo(x, y)方法設(shè)置線段的終點(diǎn)，stroke方法用來給透明的線段著色茉盏。moveto和lineto方法可以多次使用鉴未。最后，還可以使用closePath方法鸠姨，自動繪制一條當(dāng)前點(diǎn)到起點(diǎn)的直線铜秆，形成一個封閉圖形，省卻使用一次lineto方法讶迁。
<body>
<canvas id="demoCanvas" width="500" height="600">
</canvas>
<script type="text/javascript">
//通過id獲得當(dāng)前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.beginPath(); // 開始路徑繪制
context.moveTo(20, 20); // 設(shè)置路徑起點(diǎn)连茧，坐標(biāo)為(20,20)
context.lineTo(200, 200); // 繪制一條到(200,20)的直線
context.lineTo(400, 20);
context.closePath();
context.lineWidth = 2.0; // 設(shè)置線寬
context.strokeStyle = "#CC0000"; // 設(shè)置線的顏色
context.stroke(); // 進(jìn)行線的著色，這時整條線才變得可見
</script>
</body>
五、Canvas繪制文本
Context上下文對象的fillText(string, x, y)方法是用來繪制文本啸驯，它的三個參數(shù)分別為文本內(nèi)容客扎、起點(diǎn)的x坐標(biāo)、y坐標(biāo)罚斗。使用之前徙鱼，需用font設(shè)置字體、大小针姿、樣式（寫法類似與CSS的font屬性）袱吆。與此類似的還有strokeText方法，用來添加空心字距淫。另外注意一點(diǎn)：fillText方法不支持文本斷行杆故，即所有文本出現(xiàn)在一行內(nèi)。所以溉愁，如果要生成多行文本处铛，只有調(diào)用多次fillText方法。
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當(dāng)前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
// 設(shè)置字體
context.font = "Bold 50px Arial";
// 設(shè)置對齊方式
context.textAlign = "left";
// 設(shè)置填充顏色
context.fillStyle = "#005600";
// 設(shè)置字體內(nèi)容拐揭，以及在畫布上的位置
context.fillText("老馬!", 10, 50);
// 繪制空心字
context.strokeText("blog.itjeek.com!", 10, 100);
</script>
六撤蟆、Canvas繪制圓形和橢圓
Context上下文的arc方法就是繪制圓形或者橢圓，arc方法的x和y參數(shù)是圓心坐標(biāo)堂污，radius是半徑家肯，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時應(yīng)該逆時針畫（true）還是順時針畫（false）盟猖。
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當(dāng)前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.beginPath();//開始繪制路徑
//繪制以 （60,60）為圓心讨衣，50為半徑長度，從0度到360度（PI是180度）式镐，最后一個參數(shù)代表順時針旋轉(zhuǎn)反镇。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//線的寬度
context.strokeStyle = "#000";//線的樣式
context.stroke();//繪制空心的，當(dāng)然如果使用fill那就是填充了娘汞。
</script>
七歹茶、Canvas繪制圖片
Canvas繪制圖片應(yīng)該是他的一大特點(diǎn)或者是亮點(diǎn)吧。當(dāng)然配合File的API你弦，讓JS變得無可匹敵惊豺。那接下里給大家演示一下怎樣繪制圖片，并且做出一個立體效果出來禽作。
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當(dāng)前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
var image = new Image();//創(chuàng)建一張圖片
image.src = "Images/a.png";//設(shè)置圖片的路徑
image.onload = function() {//當(dāng)圖片加載完成后
for (var i = 0; i < 10; i++) {//輸出10張照片
//參數(shù)：（1）繪制的圖片 （2）坐標(biāo)x尸昧，（3）坐標(biāo)y
context.drawImage(image, 100 + i * 80, 100 + i * 80);
}
};
</script>
八、Canvas3D繪制
Canvas3D繪制的相關(guān)內(nèi)容旷偿，關(guān)于Canvas繪制漸變色烹俗、繪制陰影碍沐、圖片的相關(guān)處理操作等。
