HTML5 學習手筆一：canvas API 畫對角線

    自從停博一段時間后，一直在思考特別是今年開年，在想學習什么技術做為未來的技術儲備。本來想加強下Android 底層方面的知識，但覺得工作上跟這塊有所涉及再學習的話有點懶，由于Windows Phone 7 開發工作上沒有涉及，目前也算是入門，未來短時間內不會考慮將其應用于工作選擇，故不做考慮。現選擇了兩個方向為：IOS和HTML5，手上的毛主席相對比較緊還沒有買MAC，所以優先選擇了HTML5先涉獵一下，以后再考慮精通或者再涉獵IOS，作為未來的技術儲備。

     關于HTML5的簡介和推廣者網上一大把資料這里就略過，直接進入主題。

在頁面中加入HTML5->canvas

   在HTML頁面中插入canvas 元素非常直觀。只要在HTML源碼中插入canvas標簽：

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //帶實心邊框的canvas元素 

請使用支持HTML5的瀏覽器瀏覽

 在canvas中繪制一條對角線

步驟分為：

1. 首先獲得頁面元素中的canvas對象： var canvas=document.getElementById('diagonal');
2. 得到canvas的上下文 ：var context=canvas.getContext('2d'); 
3. 通知canvas將要開始繪制一個新的圖形：context.beginPath();
4. 將當前的位置移動到新的目標坐標(x,y)。(不繪制):context.moveTo(0,0);
5. 將當前位置移動到新的目標坐標(x,y)，而且在兩個坐標之間畫一條直線:context.lineTo(140,70);
6. 調用canvas根據上面的指示繪制圖：context.stroke();

根據上面的步驟，編寫的代碼為：

</html>

 效果如下例子：

 注意： beginPath、moveTo、lineTo都不會直接修改canvas的展示結果。canvas中很多用于設置樣式和外觀的函數也同樣不會直接修改顯示結果。只有當對路徑應用繪制（storke）或填充（fill）方法時，結果才會顯示出來。否則，只有在顯示圖像、顯示廣本或者繪制、填充和清除矩形框的時候，canvas才會馬上更新。

使用變換方法在canvas 上繪制對角線

這個方法較之上面的方法多了三個步驟：

1. 首先先保存當前繪圖狀態save
2. 再用平衡方法繪制上下文，使用translate
3. 最后再繪圖完畢后使用restore 恢復原有的繪圖狀態。 

至于為什么要使用save和restore方法，演示完DEMO會講述。變化方法繪制對角線的代碼如下：

        </script>

演示的DEMO如下：

 使用canvas 的save 和 restore注意事項

分為兩種情況：

1. 如果你本身繪制的圖可以一次性繪制完，那可以不使用save和restore
2. 如果你繪制圖繪制一次后，使用stroke或才fill 后，底下還需要再次做繪制的動作，那么使用save和restore 會更好，不會跟上次的畫圖沖突，得不到我們想要的效果。 

 幾個簡單的小例子，稍微了解了HTML5 的一些編寫方式和它強悍的API，雖然目前還沒有好用的IDE來編寫HTML5應用或游戲，但隨著HTML5一步步的來臨，對它的未來應用非常有信心。