【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面
生活随笔
收集整理的這篇文章主要介紹了
【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
弧度一塊可能有誤，需要再研究
導航
【初探HTML5之使用新標簽布局】用html5布局我的博客頁！
【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放
【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視頻播放HTML5、Flash誰才是王道？
【HTML5初探之本地存儲】如果沒有數(shù)據(jù)庫。。。
【HTML5初探之離線應用】如何打造零請求、無流量的網(wǎng)站？
【HTML5初探之通信API】跨域門檻不再高、數(shù)據(jù)推送不是夢
【HTML5初探之Web Workers】網(wǎng)頁也能多線程
【HTML5初探之Geolocation API】讓我們來回去地理信息
?
前言
最近小弟夠活躍了，主要是思想上發(fā)生了改變，有了明確的目的性，整個人有干勁多了。
但是，其實小弟寫的東西很亂，至少最近這些東西很亂就是了，因為我是邊看書邊寫博客，就當讀書筆記似的，希望各位包涵。
HTML5前端初探是一個系列，我會從頭到尾學習HTML5與CSS3形成兩個系列“HTML5初探”、“CSS3初探”，
然后再做第二次學習，將第一次沒有弄懂的全部搞懂，將一些需要擴展的做擴展。
號外：學到這一章，書莫名其妙的變成了彩色的了喲八卦一下
呵呵，這里小弟八卦一下，小弟一直在關注”失業(yè)的程序員“一文的大哥，拋開創(chuàng)業(yè)故事、創(chuàng)業(yè)經(jīng)歷不說，對于其中學姐、博主、卞工之間的故事非常感興趣。
學姐絕對是女神般的存在，這種學姐誰不喜歡呢？所以說不好是三角戀哦，但是，當我看到最近的一期卞工相親，我發(fā)現(xiàn)我錯了，我真的大錯特錯！！！
卞工相親要帶上博主，而最后居然很詭異的向博主說出他已心有所屬！！！然后在回想之前死心塌地的跟著博主出來創(chuàng)業(yè)，再到后面時時刻刻關注博主和學姐的發(fā)展，
甚至主動和學姐聯(lián)系（關心之間關系），我一直認為卞工會不會也是”尊敬“學姐呢？但是新的一期結(jié)束后，我的出了結(jié)論：絕對不是！！！
其實卞工自始至終愛的都只是一個人......此處省略三千字
呵呵，希望博主不要見怪，他的故事非常精彩，又出的慢，小弟等不及這里小小調(diào)侃一下，萬望海涵。?
初識canvas元素
HTML5新增了一個元素canvas，用于繪圖使用，其實它的表現(xiàn)和div比較接近（其實他應該屬于inline-block），而提供了許多接口，從而輕易的繪制矩形框、園三角形等
PS：關于HTML5新增元素
經(jīng)過最近兩天的學習，和以前對HTML5的認知，我認為HTML5其實還是HTML4，兩者之間沒多大的區(qū)別，無非是增加了點新東西。我認為HTML5為我們帶來的真正意義是：我們可以用javascript做更多的事情了；我們可以用javascript實現(xiàn)更好的產(chǎn)品了。 比如HTML5就解決了我們頭疼的跨域問題、實時通信API、與現(xiàn)在的canvas 之所以HTML5叫HTML5，我認為他是劃時代的，比如他讓我們用網(wǎng)頁開發(fā)游戲變成可能；比如他讓電腦桌面只剩IE不在是傳說（過于夸張）
繪制矩形框
直入正題，我們來繪制一個矩形框看看,這里提供一個顏色選擇器用于方便的選擇顏色，PS：現(xiàn)在不用jquery編程感覺真麻煩。。。
?問題：定義樣式與定義height與width
?一來就遇到了問題，我這里先來截個圖：
<!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); //填充畫布結(jié)束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 οnclick="draw();">繪制矩形</button><input type="color" /> </body> </html>各位情況canvas元素，圖一位設置width與height的情況，圖二十用style指定的情況：
可以看到，對于canvas來說，還是老老實實定義高寬的好，別去傻乎乎的用樣式了，當然這個問題需要實際研究才能得出最終結(jié)論。
好了，現(xiàn)在我們再來看看繪制矩形這個方法：
PS：其實，使用該方法這么麻煩，完全可以將該函數(shù)封裝下下，使用便會簡單許多 1、使用getElementById方法獲取繪制對象 2、取得上下文getContext('2d')，這都是固定的寫法 3、指定填充的顏色fillStyle和繪制的顏色strokeStyle，即里面的顏色和邊框的顏色 4、指定線寬linewidth 5、填充/繪制 fillRect/strokeRect 參數(shù)為 x,y,width,height 6、若是要使其中一塊透明，使用clearRect至此，繪制矩形框便暫時告一段落。
繪制圓形
現(xiàn)在我們來繪制圓形，這個說起繪制圓形，其實我原來用js好像寫過一個，這里也貼出來看看：
我是純js畫的圓 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 div 7 { 8 position: absolute; 9 width: 1px; 10 height: 1px; 11 line-height: 1px; 12 } 13 </style> 14 <script src="http://www.cnblogs.com/jquery-1.7.1.js" type="text/javascript"></script> 15 <script type="text/javascript"> 16 //x2 + y2 = r2; 17 $(document).ready(function () { 18 //先畫x，y 19 var box = $('#box'); 20 var NUM = 200; 21 var R = NUM / 2; 22 var RR = R * R; 23 for (var i = 0; i <= NUM; i = i + 6) { 24 //var divX = $('<div style="left:' + i + 'px;top:' + R + 'px;">*</div>') 25 // var divY = $('<div style="top:' + i + 'px;left:' + R + 'px;">*</div>') 26 27 var ti = i; 28 //sqrt(x) 29 if (ti > R) { 30 ti = ti - R; 31 var ty = Math.sqrt((RR - ti * ti)); 32 var y = $('<div style="left:' + (R - ty) + 'px;top:' + i + 'px;">*</div>') 33 var y1 = $('<div style="left:' + (R + ty) + 'px;top:' + i + 'px;">*</div>') 34 box.append(y); 35 box.append(y1); 36 } else if (ti < R) { 37 ti = R - ti; 38 var ty = Math.sqrt((RR - ti * ti)); 39 var y = $('<div style="left:' + (R - ty) + 'px;top:' + i + 'px;">*</div>') 40 var y1 = $('<div style="left:' + (R + ty) + 'px;top:' + i + 'px;">*</div>') 41 box.append(y); 42 box.append(y1); 43 } 44 //box.append(divX); 45 //box.append(divY); 46 } 47 48 for (var i = 0; i <= NUM; i = i + 6) { 49 //var divX = $('<div style="left:' + i + 'px;top:' + R + 'px;">*</div>') 50 // var divY = $('<div style="top:' + i + 'px;left:' + R + 'px;">*</div>') 51 var ti = i; 52 //sqrt(x) 53 if (ti > R) { 54 ti = ti - R; 55 var ty = Math.sqrt((RR - ti * ti)); 56 var y = $('<div style="top:' + (R - ty) + 'px;left:' + i + 'px;">*</div>') 57 var y1 = $('<div style="top:' + (R + ty) + 'px;left:' + i + 'px;">*</div>') 58 box.append(y); 59 box.append(y1); 60 } else if (ti < R) { 61 ti = R - ti; 62 var ty = Math.sqrt((RR - ti * ti)); 63 var y = $('<div style="top:' + (R - ty) + 'px;left:' + i + 'px;">*</div>') 64 var y1 = $('<div style="top:' + (R + ty) + 'px;left:' + i + 'px;">*</div>') 65 box.append(y); 66 box.append(y1); 67 } 68 } 69 }); 70 71 </script> 72 </head> 73 <body> 74 <div id="box" style="width: 504px; height: 504px; position: relative; top: 20px; 75 left: 300px; border: 0px solid black;"> 76 </div> 77 </body> 78 </html>話說，他還是比較圓的說。。。
進入正題
說起畫圓、正弦圖等肯定會經(jīng)過一定計算的，所以稍稍復雜點：
① 創(chuàng)建路徑
② 創(chuàng)建圖形路徑
③ 路徑創(chuàng)建完成后關閉路徑
④ 設定繪制樣式調(diào)用方法繪制之
我是一個圓 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 function draw() { 7 //獲取canvas對象 8 var canvas = document.getElementById('canvas'); 9 if (canvas == null) { 10 return false; 11 } 12 var context = canvas.getContext('2d'); 13 context.fillStyle = '#99d9ea'; 14 context.fillRect(0, 0, 300, 200); //填充畫布結(jié)束 15 for (var i = 0; i < 5; i++) { 16 context.beginPath(); 17 context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); 18 context.closePath(); 19 context.strokeStyle = 'red'; 20 context.fill(); 21 } 22 } 23 </script> 24 </head> 25 <body> 26 <canvas id="canvas" width="300" height="200" > 27 </canvas> 28 <br /> 29 <button onclick="draw();"> 30 繪制圓</button> 31 <input type="color" /> 32 </body> 33 </html>我們來看看繪制圓過程中其它地方都沒有問題，但是創(chuàng)建圓路徑這塊值得考慮：
arc方法參數(shù)很多，依次是： x y 半徑 開始弧度（我們一般喜歡角度，所以要轉(zhuǎn)換） 結(jié)束弧度 順時針或者逆時針true為順時針其它都好說，主要這個開始角度和結(jié)束角度我們來研究下，因為開始我沒搞懂，但后來我發(fā)現(xiàn)他其實很簡單了。。。 就是開始的角度和結(jié)束的角度嘛，和我們高中學的知識一樣的，只不過單位換算Math.PI/180為一度。。。。
反正還是沒說清楚，對了，記得我們高中畫圓的除了圓規(guī)和一個計量三角形角度的半圓直尺了嗎，我要說的角度就是那個。。。太坑爹了！
好像最右邊是0度，垂直是90度，水平是180度，既然如此，我們再來看看
正時針逆時針 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 function draw() { 7 //獲取canvas對象 8 var canvas = document.getElementById('canvas'); 9 if (canvas == null) { 10 return false; 11 } 12 var context = canvas.getContext('2d'); 13 context.fillStyle = '#99d9ea'; 14 context.fillRect(0, 0, 400, 300); //填充畫布結(jié)束 15 16 context.beginPath(); 17 context.arc(80, 80, 50, 0, 180 * Math.PI / 180, true); 18 context.closePath(); 19 context.fillStyle = 'gray'; 20 context.fill(); 21 22 context.beginPath(); 23 context.arc(180, 180, 50, 0, 180 * Math.PI / 180, false); 24 context.closePath(); 25 context.fillStyle = 'gray'; 26 context.fill(); 27 28 29 } 30 </script> 31 </head> 32 <body> 33 <canvas id="canvas" width="400" height="300"> 34 </canvas> 35 <br /> 36 <button onclick="draw();"> 37 繪制圓</button> 38 <input type="color" /> 39 </body> 40 </html>
我們發(fā)現(xiàn)正時針與逆時針還是有所不同的，
1 context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);原諒我這里居然思考了半個小時，我甚至搜索了高中的資料。。。。
于是我好像明白了點什么。。。。。。
moveTo與lineTo
現(xiàn)上實驗結(jié)果：
兩次moveto 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 function draw() { 7 //獲取canvas對象 8 var canvas = document.getElementById('canvas'); 9 if (canvas == null) { 10 return false; 11 } 12 var context = canvas.getContext('2d'); 13 context.fillStyle = '#99d9ea'; 14 context.fillRect(0, 0, 300, 200); //填充畫布結(jié)束 15 16 context.beginPath(); 17 context.fillStyle = 'gray'; 18 context.strokeStyle = 'black'; 19 20 context.moveTo(10, 10); 21 context.lineTo(150, 150); 22 23 context.moveTo(10, 10); 24 context.lineTo(10, 150); 25 26 context.closePath(); 27 context.fill(); 28 context.stroke(); 29 30 } 31 </script> 32 </head> 33 <body> 34 <canvas id="canvas" width="300" height="200"> 35 </canvas> 36 <br /> 37 <button onclick="draw();"> 38 繪制</button> 39 <input type="color" /> 40 </body> 41 </html> 一次moveto 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 function draw() { 7 //獲取canvas對象 8 var canvas = document.getElementById('canvas'); 9 if (canvas == null) { 10 return false; 11 } 12 var context = canvas.getContext('2d'); 13 context.fillStyle = '#99d9ea'; 14 context.fillRect(0, 0, 300, 200); //填充畫布結(jié)束 15 16 context.beginPath(); 17 context.fillStyle = 'gray'; 18 context.strokeStyle = 'black'; 19 20 context.moveTo(10, 10); 21 context.lineTo(150, 150); 22 23 // context.moveTo(10, 10); 24 context.lineTo(10, 150); 25 26 context.closePath(); 27 context.fill(); 28 context.stroke(); 29 30 } 31 </script> 32 </head> 33 <body> 34 <canvas id="canvas" width="300" height="200"> 35 </canvas> 36 <br /> 37 <button onclick="draw();"> 38 繪制</button> 39 <input type="color" /> 40 </body> 41 </html> 三次moveto 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 function draw() { 7 //獲取canvas對象 8 var canvas = document.getElementById('canvas'); 9 if (canvas == null) { 10 return false; 11 } 12 var context = canvas.getContext('2d'); 13 context.fillStyle = '#99d9ea'; 14 context.fillRect(0, 0, 300, 200); //填充畫布結(jié)束 15 16 context.beginPath(); 17 context.fillStyle = 'gray'; 18 context.strokeStyle = 'black'; 19 20 context.moveTo(10, 10); 21 context.lineTo(150, 150); 22 23 context.moveTo(10, 10); 24 context.lineTo(10, 150); 25 26 context.moveTo(10, 150); 27 context.lineTo(150, 150); 28 29 context.closePath(); 30 context.fill(); 31 context.stroke(); 32 33 } 34 </script> 35 </head> 36 <body> 37 <canvas id="canvas" width="300" height="200"> 38 </canvas> 39 <br /> 40 <button onclick="draw();"> 41 繪制</button> 42 <input type="color" /> 43 </body> 44 </html>以上代碼幾乎一樣，但是他產(chǎn)生的結(jié)果卻不同：
?結(jié)語
?這章內(nèi)容還比較多，我今天大概到極限了，換個時間再將他結(jié)束。?
轉(zhuǎn)載于:https://www.cnblogs.com/yexiaochai/archive/2013/04/17/3027220.html
總結(jié)
以上是生活随笔為你收集整理的【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国银行信用卡取现手续费多少？利息多少？
- 下一篇： 【web前端优化】前端无优化，庸人自扰之