HTML5中如何解決canvas元素引領(lǐng)下一代web頁面的問題，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)公司于2013年成立，公司以網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千多家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計、獨特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

初識canvas元素

HTML5新增了一個元素canvas，用于繪圖使用，其實它的表現(xiàn)和div比較接近（其實他應(yīng)該屬于inline-block），而提供了許多接口，從而輕易的繪制矩形框、園三角形等

PS：關(guān)于HTML5新增元素

經(jīng)過最近兩天的學(xué)習(xí)，和以前對HTML5的認(rèn)知，我認(rèn)為HTML5其實還是HTML4，兩者之間沒多大的區(qū)別，無非是增加了點新東西。
我認(rèn)為HTML5為我們帶來的真正意義是：我們可以用javascript做更多的事情了；我們可以用javascript實現(xiàn)更好的產(chǎn)品了。比如HTML5就解決了我們頭疼的跨域問題、實時通信API、與現(xiàn)在的canvas之所以HTML5叫HTML5，我認(rèn)為他是劃時代的，比如他讓我們用網(wǎng)頁開發(fā)游戲變成可能；比如他讓電腦桌面只剩IE不在是傳說（過于夸張）

繪制矩形框

直入正題，我們來繪制一個矩形框看看,這里提供一個顏色選擇器用于方便的選擇顏色，PS：現(xiàn)在不用jquery編程感覺真麻煩。。。

 問題：定義樣式與定義height與width

 一來就遇到了問題，我這里先來截個圖：

代碼如下:

   
   


   
   
   

   
       繪制矩形
   

各位情況canvas元素，圖一位設(shè)置width與height的情況，圖二十用style指定的情況：

可以看到，對于canvas來說，還是老老實實定義高寬的好，別去傻乎乎的用樣式了，當(dāng)然這個問題需要實際研究才能得出最終結(jié)論。

好了，現(xiàn)在我們再來看看繪制矩形這個方法：

PS：其實，使用該方法這么麻煩，完全可以將該函數(shù)封裝下下，使用便會簡單許多

1、使用getElementById方法獲取繪制對象2、取得上下文getContext('2d')，這都是固定的寫法3、指定填充的顏色fillStyle和繪制的顏色strokeStyle，即里面的顏色和邊框的顏色4、指定線寬linewidth6、填充/繪制 fillRect/strokeRect 參數(shù)為 x,y,width,height6、若是要使其中一塊透明，使用clearRect

至此，繪制矩形框便暫時告一段落。

繪制圓形

現(xiàn)在我們來繪制圓形，這個說起繪制圓形，其實我原來用js好像寫過一個，這里也貼出來看看：

代碼如下:

我是純js畫的圓



   
   
   
   


   

話說，他還是比較圓的說。。。

進(jìn)入正題

說起畫圓、正弦圖等肯定會經(jīng)過一定計算的，所以稍稍復(fù)雜點：

① 創(chuàng)建路徑

② 創(chuàng)建圖形路徑

③ 路徑創(chuàng)建完成后關(guān)閉路徑

④ 設(shè)定繪制樣式調(diào)用方法繪制之

代碼如下:

我是一個圓



   
   


   
   
   
   
        繪制圓
   

我們來看看繪制圓過程中其它地方都沒有問題，但是創(chuàng)建圓路徑這塊值得考慮：

arc方法參數(shù)很多，依次是：xy半徑開始弧度（我們一般喜歡角度，所以要轉(zhuǎn)換）結(jié)束弧度順時針或者逆時針true為順時針
其它都好說，主要這個開始角度和結(jié)束角度我們來研究下，因為開始我沒搞懂，但后來我發(fā)現(xiàn)他其實很簡單了。。。就是開始的角度和結(jié)束的角度嘛，和我們高中學(xué)的知識一樣的，只不過單位換算Math.PI/180為一度。。。。
反正還是沒說清楚，對了，記得我們高中畫圓的除了圓規(guī)和一個計量三角形角度的半圓直尺了嗎，我要說的角度就是那個。。。太坑爹了！
好像最右邊是0度，垂直是90度，水平是180度，既然如此，我們再來看看

看完上述內(nèi)容，你們掌握HTML5中如何解決canvas元素引領(lǐng)下一代web頁面的問題的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：HTML5中如何解決canvas元素引領(lǐng)下一代web頁面的問題-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/gcpdj.html