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();

 

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

<! DOCTYPE html >
< html >
         < canvas  id ="diagonal"  style ="border:1px solid;"  width ="200"  height ="200" ></ canvas >
         < script >
                 function drawDiagonal()
                {
                    var canvas=document.getElementById('diagonal_line'); // 得到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纔會立刻更新。

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

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

 

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

 

至於爲何要使用save和restore方法，演示完DEMO會講述。變化方法繪製對角線的代碼以下：

 <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);

        </script>

 

演示的DEMO以下：

 使用canvas 的save 和 restore注意事項

分爲兩種狀況：

 

1. 若是你自己繪製的圖能夠一次性繪製完，那能夠不使用save和restore
2. 若是你繪製圖繪製一次後，使用stroke或才fill 後，底下還須要再次作繪製的動做，那麼使用save和restore 會更好，不會跟上次的畫圖衝突，得不到咱們想要的效果。 

 

 幾個簡單的小例子，稍微瞭解了HTML5 的一些編寫方式和它強悍的API，雖然目前尚未好用的IDE來編寫HTML5應用或遊戲，但隨着HTML5一步步的來臨，對它的將來應用很是有信心。