自從停博一段時(shí)間后，一直在思考特別是今年開年，在想學(xué)習(xí)什么技術(shù)做為未來的技術(shù)儲(chǔ)備。本來想加強(qiáng)下Android 底層方面的知識(shí)，但覺得工作上跟這塊有所涉及再學(xué)習(xí)的話有點(diǎn)懶，由于Windows Phone 7 開發(fā)工作上沒有涉及，目前也算是入門，未來短時(shí)間內(nèi)不會(huì)考慮將其應(yīng)用于工作選擇，故不做考慮。現(xiàn)選擇了兩個(gè)方向?yàn)椋篒OS和HTML5，手上的毛主席相對(duì)比較緊還沒有買MAC，所以優(yōu)先選擇了HTML5先涉獵一下，以后再考慮精通或者再涉獵IOS，作為未來的技術(shù)儲(chǔ)備。

   關(guān)于HTML5的簡介和推廣者網(wǎng)上一大把資料這里就略過，直接進(jìn)入主題。

在頁面中加入HTML5->canvas

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

 //帶實(shí)心邊框的canvas元素

請(qǐng)使用支持HTML5的瀏覽器瀏覽

 在canvas中繪制一條對(duì)角線

步驟分為：

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

根據(jù)上面的步驟，編寫的代碼為：