【HTML5初探之繪製影像（上）】看我canvas元素引領下一代web頁面

範大腳腳發表於2017-12-06
HTMLCanvasWeb
導航
【初探HTML5之使用新標籤佈局】用html5佈局我的部落格頁！
【HTML5初探之form標籤】解放表單驗證、增加檔案上傳、整合拖放
【HTML5初探之繪製影像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪製影像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視訊播放HTML5、Flash誰才是王道？
【HTML5初探之本地儲存】如果沒有資料庫。。。
【HTML5初探之離線應用】如何打造零請求、無流量的網站？
【HTML5初探之通訊API】跨域門檻不再高、資料推送不是夢
【HTML5初探之Web Workers】網頁也能多執行緒
【HTML5初探之Geolocation API】讓我們來回去地理資訊
 
前言
最近小弟夠活躍了，主要是思想上發生了改變，有了明確的目的性，整個人有幹勁多了。
但是，其實小弟寫的東西很亂，至少最近這些東西很亂就是了，因為我是邊看書邊寫部落格，就當讀書筆記似的，希望各位包涵。
HTML5前端初探是一個系列，我會從頭到尾學習HTML5與CSS3形成兩個系列“HTML5初探”、“CSS3初探”，
然後再做第二次學習，將第一次沒有弄懂的全部搞懂，將一些需要擴充套件的做擴充套件。
號外：學到這一章，書莫名其妙的變成了彩色的了喲
八卦一下
呵呵，這裡小弟八卦一下，小弟一直在關注”失業的程式設計師“一文的大哥，拋開創業故事、創業經歷不說，對於其中學姐、博主、卞工之間的故事非常感興趣。
學姐絕對是女神般的存在，這種學姐誰不喜歡呢？所以說不好是三角戀哦，但是，當我看到最近的一期卞工相親，我發現我錯了，我真的大錯特錯！！！
卞工相親要帶上博主，而最後居然很詭異的向博主說出他已心有所屬！！！然後在回想之前死心塌地的跟著博主出來創業，再到後面時時刻刻關注博主和學姐的發展，
甚至主動和學姐聯絡（關心之間關係），我一直認為卞工會不會也是”尊敬“學姐呢？但是新的一期結束後，我的出了結論：絕對不是！！！
其實卞工自始至終愛的都只是一個人……此處省略三千字
　　
呵呵，希望博主不要見怪，他的故事非常精彩，又出的慢，小弟等不及這裡小小調侃一下，萬望海涵。 
初識canvas元素
HTML5新增了一個元素canvas，用於繪圖使用，其實它的表現和div比較接近（其實他應該屬於inline-block），而提供了許多介面，從而輕易的繪製矩形框、園三角形等
PS：關於HTML5新增元素
經過最近兩天的學習，和以前對HTML5的認知，我認為HTML5其實還是HTML4，兩者之間沒多大的區別，無非是增加了點新東西。<br>我認為HTML5為我們帶來的真正意義是：我們可以用javascript做更多的事情了；我們可以用javascript實現更好的產品了。
比如HTML5就解決了我們頭疼的跨域問題、實時通訊API、與現在的canvas
之所以HTML5叫HTML5，我認為他是劃時代的，比如他讓我們用網頁開發遊戲變成可能；比如他讓電腦桌面只剩IE不在是傳說（過於誇張）
　　
繪製矩形框
直入正題，我們來繪製一個矩形框看看,這裡提供一個顏色選擇器用於方便的選擇顏色，PS：現在不用jquery程式設計感覺真麻煩。。。
 問題：定義樣式與定義height與width
 一來就遇到了問題，我這裡先來截個圖：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title></title>
    <script type=”text/javascript”>
        function draw() {
            //獲取canvas物件
            var canvas =  document.getElementById(`canvas`);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext(`2d`);
            context.fillStyle = `#99d9ea`;
            context.fillRect(0, 0, 300, 200); //填充畫布結束
 
            context.strokeStyle = `red`;
            context.fillStyle = `gray`;
            context.lineWidth = 1;
            context.fillRect(10, 10, 100, 100);
            context.strokeRect(10, 10, 100, 100);
 
            context.clearRect(20, 20, 20, 20);
        }
    </script>
</head>
<body>
    <canvas id=”canvas” width=300 height=”200″ style=”border: 1px solid black; width: 300px; height: 200px;”>
    </canvas>
    <br />
    <button onclick=”draw();”>
        繪製矩形</button>
    <input type=”color” />
</body>
</html>
　　各位情況canvas元素，圖一位設定width與height的情況，圖二十用style指定的情況：
可以看到，對於canvas來說，還是老老實實定義高寬的好，別去傻乎乎的用樣式了，當然這個問題需要實際研究才能得出最終結論。
好了，現在我們再來看看繪製矩形這個方法：
PS：其實，使用該方法這麼麻煩，完全可以將該函式封裝下下，使用便會簡單許多
1、使用getElementById方法獲取繪製物件
2、取得上下文getContext(`2d`)，這都是固定的寫法
3、指定填充的顏色fillStyle和繪製的顏色strokeStyle，即裡面的顏色和邊框的顏色
4、指定線寬linewidth
5、填充/繪製 fillRect/strokeRect 引數為 x,y,width,height
6、若是要使其中一塊透明，使用clearRect
至此，繪製矩形框便暫時告一段落。
繪製圓形
現在我們來繪製圓形，這個說起繪製圓形，其實我原來用js好像寫過一個，這裡也貼出來看看：
我是純js畫的圓
話說，他還是比較圓的說。。。
進入正題
說起畫圓、正弦圖等肯定會經過一定計算的，所以稍稍複雜點：
① 建立路徑
② 建立圖形路徑
③ 路徑建立完成後關閉路徑
④ 設定繪製樣式呼叫方法繪製之
我是一個圓
我們來看看繪製圓過程中其它地方都沒有問題，但是建立圓路徑這塊值得考慮：
arc方法引數很多，依次是：
x
y
半徑
開始弧度（我們一般喜歡角度，所以要轉換）
結束弧度
順時針或者逆時針true為順時針<br>其它都好說，主要這個開始角度和結束角度我們來研究下，因為開始我沒搞懂，但後來我發現他其實很簡單了。。。
就是開始的角度和結束的角度嘛，和我們高中學的知識一樣的，只不過單位換算Math.PI/180為一度。。。。<br>反正還是沒說清楚，對了，記得我們高中畫圓的除了圓規和一個計量三角形角度的半圓直尺了嗎，我要說的角度就是那個。。。太坑爹了！<br>好像最右邊是0度，垂直是90度，水平是180度，既然如此，我們再來看看
　
正時針逆時針
我們發現正時針與逆時針還是有所不同的，
1  context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);
原諒我這裡居然思考了半個小時，我甚至搜尋了高中的資料。。。。
於是我好像明白了點什麼。。。。。。
moveTo與lineTo
現上實驗結果：
兩次moveto
一次moveto
三次moveto
以上程式碼幾乎一樣，但是他產生的結果卻不同：
我認為，使用moveto後相當於新開一起點，之前的一筆勾銷，
若是隻使用lineto的話，他會將幾個點連成線，若是可以組成圖形便會擁有中間色彩
　　
 結語
 這章內容還比較多，我今天大概到極限了，換個時間再將他結束。 
您可以考慮給小釵發個小額微信紅包以資鼓勵 
本文轉自葉小釵部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/archive/2013/04/17/3027220.html如需轉載請自行聯絡原作者


相關文章