1 canvas （graphics） 繪製二維矢量圖的畫布
2 檢測瀏覽器是否支持 canvas
- try{
- document.createElement("canvas").getContext("2d");
- alert("ok");
- //document.getElementById("support").innerHTML = "Html5 canvas is support in your browser";
- }catch(e){
- document.getElementById("support").innerHTML = "Html5 canvas is not support in your browser";
- alert("No");
- }
3 在頁面中插入canvas 元素
- <canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //帶實心邊框的canvas元素
4 繪製簡對角線
- 首先獲得頁面元素中的canvas對象： var canvas=document.getElementById('diagonal');
- 得到canvas的上下文 ：var context=canvas.getContext('2d');
- 通知canvas將要開始繪製一個新的圖形：context.beginPath();
- 將當前的位置移動到新的目標座標(x,y)。(不繪製):context.moveTo(0,0);
- 將當前位置移動到新的目標座標(x,y)，而且在兩個座標之間畫一條直線:context.lineTo(140,70);
- 調用canvas根據上面的指示繪製圖：context.stroke();
- <html>
- <canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
- <script>
- function drawDiagonal()
- {
- var canvas=document.getElementById('diagonal');//獲得canvas對象
- var context=canvas.getContext('2d'); //獲取canvas的 上下文
- //用絕對座標來創建一條路徑
- context.beginPath();
- context.moveTo(0,0);//將光標移動到x爲0，y爲0的地方開始準備從這裏開始繪製
- context.lineTo(140,70);//繪製到x 座標爲140，y座標爲70的地方
- //將這條線繪製到canvas上
- context.stroke(); //只有調用stroke canvas 纔會繪製圖像顯示結果
- }
- window.addEventListener("load",drawDiagonal,true);
- </script>
- </html>
注意： beginPath、moveTo、lineTo都不會直接修改canvas的展示結果。canvas中很多用於設置樣式和外觀的函數也同樣不會直接修改顯示結果。只有當對路徑應用繪製（storke）或填充（fill）方法時，結果纔會顯示出來。否則，只有在顯示圖像、顯示廣本或者繪製、填充和清除矩形框的時候，canvas纔會馬上更新。
5 使用變換方法在canvas上繪製對角線
這個方法較之上面的方法多了三個步驟：
- 首先先保存當前繪圖狀態save
- 再用平衡方法繪製上下文，使用translate
- 最後再繪圖完畢後使用restore 恢復原有的繪圖狀態。
- <script>
- function drawDiagonal()
- {
- var canvas=document.getElementById('diagonal');
- var context=canvas.getContext('2d');
- //保存當前繪圖的狀態
- context.save();
- //向右下方移動繪圖上下文
- context.translate(70,140);//平移-> x表示將座標原點向左右移動多少個單位 y表示將座標原點向上下移動多少個單位
- //畫圖
- context.beginPath();
- context.moveTo(0,0);
- context.lineTo(70,-70);
- context.stroke();
- //恢復原有的繪圖狀態
- context.restore();
- //之所以要使用save 和 restore 是因爲在操作canvas 時先把狀態保存，然後如果下面還需要操作canvas時將狀態恢復過來不會，這樣不會影響到上面我們畫完的結果。
- }
- window.addEventListener("load",drawDiagonal,true);
使用canvas 的save和restore需要注意事項
- 如果你本身繪製的圖可以一次性繪製完，那可以不使用save和restore
- 如果你繪製圖繪製一次後，使用stroke或才fill 後，底下還需要再次做繪製的動作，那麼使用save和restore 會更好，不會跟上次的畫圖衝突，得不到我們想要的效果。