|
1.引言 在日常生活中總喜歡涂涂畫畫寫寫,，這樣可以使表達更加直觀,，記錄的也更加詳細，而在HTML5中同樣可以畫一畫,。canvas意為畫布,，現(xiàn)實生活中用它來作畫，在HTML5中的canvas與之類似,，可以稱它為“網(wǎng)頁中的畫布”,，有了這個畫布便可以輕松的在網(wǎng)頁中繪制圖形、文字,、圖片等,。 2.初識畫布 HTML5 <canvas>元素用于圖形的繪制,，通過腳本 (通常是JavaScript)來完成。因為<canvas> 標簽只是圖形容器,，所以必須使用腳本來繪制圖形,。 （1）創(chuàng)建一個畫布 HTML5中提供了<canvas>標簽,，使用<canvas>標簽可以在網(wǎng)頁中創(chuàng)建一個矩形區(qū)域的畫布,。但值得注意的是在默認情況下 <canvas> 元素沒有邊框和內(nèi)容。 <canvas id="cavsElem" width="400" height="300"> 您的瀏覽器不支持canvas </canvas> |
畫布本身不具有繪制功能,，可以通過腳本語言（一般為JavaScript）操作繪制圖形的API進行繪制操作,。可以使用getElementById()方法獲取畫布,。 var canvas = document.getElementById('cavsElem'); |
（2）準備畫筆 當準備好畫畫的紙之后應該去準備畫筆,。這里的畫筆其實就是context對象，該對象可以使用JavaScript腳本獲得,。 var context = canvas.getContext('2d'); |
（3）坐標和起點 準備工作完成,，接下來就該考慮從哪里開始畫畫了。在canvas圖形繪制中,，不能像日常生活中,，提筆想在哪里畫就在哪里畫，在這里需要用到坐標來實現(xiàn),。 
圖1 坐標軸示例圖 （4）繪制線條 接下來終于可以開始畫畫了,。在canvas圖形繪制中，首先需要畫出線條,。lineTo()方法用于定義從“x,y”的位置繪制一條直線到起點或上一個線頭點,。 （5）路徑 繪制直線確定了起始點和線頭點后，便形成了一條繪制路徑,，但如果要繪制復雜路徑,，就必須要有路徑的開始和結(jié)束。 context.beginPath(); /*開始路徑*/ context.closePath(); /*閉合路徑*/ |
（6）描邊和填充 完成了畫的線條輪廓的草稿,，接下來就是準備上色,。在canvas圖形繪制中，路徑只是草稿,，真正繪制線必須執(zhí)行stroke()方法根據(jù)路徑進行描邊和使用fill()方法進行圖形的填充,。 context.stroke();//描邊 context.fill();//填充 |
3.畫布實例 （1）Canvas-文本 使用 canvas 繪制文本，首先要用font來定義字體,，然后通過使用fillText(text,x,y)來定義在 canvas 上繪制實心的文本,，或者使用strokeText(text,x,y) 來定義在 canvas上繪制空心的文本。 示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta charset="utf-8" /> <title>空心文本</title> </head> <body> <canvas id="myCanvas" width="300" height="100" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標簽,。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("我是個空心的文本哦,！",10,50); </script> </body> </html> |
效果圖： 
圖2 空心文本效果圖 （2）Canvas - 形狀 繪制圓形示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圓形</title> <style type="text/css"> canvas{border:1px solid;} </style> </head> <body> <canvas id="myCanvas" width="200px" height="200px"> 瀏覽器不支持canvas元素時顯示該文本內(nèi)容 </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var context=c.getContext("2d"); //fillStyle屬性用于指定繪制圖形的填充顏色 context.fillStyle="palegreen"; //beginPath()方法用于開始繪制路徑 context.beginPath(); //arc()方法參數(shù)：arc(x,y,radius,startAngle,endAngle,counterclockwise) //參數(shù)x,，y為起點位置，radius為圓形的半徑,，startAngle為開始角度,，endAngle為結(jié)束角度 //counterclockwise（可選）（逆時針的）這個參數(shù)傳布爾值，flase表示順時針,，true表示逆時針 context.arc(100,100,50,0,2*Math.PI,false); //closePath()方法用于將圖形閉合起來 context.closePath(); //fill()方法將圖形填充 context.fill(); </script> </body> </html> |
運行效果： 
圖3 圓形效果圖 繪制三角形示例： <html> <head> <meta charset="UTF-8"> <title>三角形</title> <style type="text/css"> canvas{border:1px solid;} </style> </head> <body> <canvas id="myCanvas" width="200px" height="200px"> 瀏覽器不支持canvas元素時顯示該文本內(nèi)容 </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var context=c.getContext("2d"); context.fillStyle="greenyellow"; context.beginPath(); context.moveTo(25,25); context.lineTo(150,25); context.lineTo(25,150); context.fill(); </script> </body> </html> |
運行效果： 
圖4 三角形效果圖 繪制笑臉示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三角形</title> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <script> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var context = canvas.getContext("2d"); context.beginPath(); context.arc(75, 75, 50, 0, Math.PI * 2, true); // 繪制 context.moveTo(110, 75); context.arc(75, 75, 35, 0, Math.PI, false); // 嘴巴(順時針) context.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼 context.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼 context.stroke(); } } </script> </body> </html> |
運行效果： 
圖5 笑臉效果圖 4.總結(jié) 通過使用canvas畫布再規(guī)定畫筆的起點,、去向、描邊,、填充等,，可以根據(jù)自己的設想畫出2d的圖形。這種方法看似簡單,，但也要思考好畫筆的每一步,，這樣才能讓畫的圖沒有偏差，因為需要計算畫筆的每一步的走向,，所以使用canvas畫布畫圖看似簡單,，其實也需要思維清晰哦。 編 輯 | 王楠嵐 責 編 | 楊金月
|
