2、認識Canvas

時間 2019-11-19

標籤認識 canvas 简体版

原文原文鏈接

　　上一篇咱們介紹了WebGL程序是使用了HTML和JaveScript來建立和顯示3D圖形的。在HTML5中新加入了<canvas>標籤，它定義了網頁上的繪圖區域。若是沒有WebGL，JavaScript只能在<canvas>上繪製二維圖形，有了WebGL，就能夠在上面繪製三維圖形了。換句話說，<canvas>就是承載WebGL的容器。html

　　在HTML5以前，若是須要在網頁上顯示圖像，只能使用<img>標籤，但只能顯示靜態圖片，不能提供實時繪製和渲染。所以，後來出現了一些第三方解決方案，如Flash、Silverlight等；可是這些第三方解決方案的最大問題就是須要安裝插件。canvas

　　HTML5引入了<canvas>標籤，容許JavaScript動態地繪製圖形，而且不須要按照任何插件。瀏覽器

　　上面說到，<canvas>定義了一個繪圖區域，在這個區域中，使用JavaScript能夠繪製任何你想畫的東西，好比：點、線、矩形、圓。這是一個基於<canvas>的繪圖板程序，你能夠在上面隨意繪製任何形狀，改變其顏色，甚至回放你的繪製過程。ide

　　下面咱們利用<canvas>畫個矩形，並用紅色填充；爲了在<canvas>上繪製二維圖形，需通過如下幾個步驟：函數

　　建立<canvas>標籤，指定繪圖範圍。
　　利用JavaScript獲取到<canvas>標籤。
　　向該標籤請求二維圖形的「繪圖上下文」。
　　使用繪圖上下文調用相應的繪圖函數，繪製二維圖形。

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="Generator" content="EditPlus®">
 6     <meta name="Author" content="Mirror">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <title>Draw a red rectangle </title>
10     <script>
11         function main() { 12             //獲取<canvas>標籤
13             var canvas = document.getElementById("myCanvas"); 14             //若是沒找到<canvas>標籤，則輸出錯誤信息
15             if (!canvas) { 16  console.log('Failed to retrieve the <canvas> element.'); 17                 return; 18  } 19 
20             //要在<canvas>上繪製圖像，須先獲取繪圖上下文，「2d」表明咱們要繪製二維圖形。
21             var ctx = canvas.getContext("2d"); 22 
23             //fillstyle：設置或返回用於填充繪畫的顏色、漸變或模式；這裏咱們設置填充顏色爲紅色。
24  ctx.fillStyle = "red"; 25             /*
26  使用填充顏色填充矩形。 27  fillRect(x,y,width,height) 28  x 矩形左上角的 x 座標 29  y 矩形左上角的 y 座標 30  width 矩形的寬度 31  height 矩形的高度 32             */
33  ctx.fillRect(120, 10, 150, 150); 34  } 35     </script>
36 </head>
37 <!--頁面加載完成後，執行JavaScript中的main()函數-->
38 <body onload="main()">
39     <!--定義<canvas>標籤，經過width屬性和height屬性規定它是一片400×400的繪製區域-->
40     <canvas id="myCanvas" width="400" height="400">
41         <!--當瀏覽器不支持時，會直接忽略<canvas>標籤，而直接顯示下面這一行提示-->
42  Please use a browser that supports "canvas". 43     </canvas>
44 </body>
45 </html>

Draw a red rectangle

　　以上示例中的代碼註釋寫得比較詳細，相信一看都能明白。spa

　　因爲<canvas>元素能夠同時支持二維圖形和三維圖形，它不直接提供繪圖方法，而是提供一種叫上下文的機制來繪圖。在上述代碼中，canvas.getContext() 方法的參數制訂了上下文的類型（二維或三維）。若是你想要繪製二維圖形，就必須指定爲2d（區分大小寫）。插件

　　ctx.fillRect(x, y, width, height)這個方法在註釋中已經解釋了，不過在這裏想特別說明一下x，y座標。<canvas>的座標系橫軸爲x軸（正方向朝右），縱軸爲y軸（正方向朝下）。原點（0，0）在左上方。fillRect方法中設置的x，y指的是從<canvas>座標的開始算，右移x像素，下移y像素的位置，就是矩形左上角的位置。以下圖：code

　　咱們介紹瞭如何在<canvas>中繪製二維圖形.WebGL則能夠在<canvas>中繪製三維圖形，下一篇，咱們介紹如何在<canvas>中使用WebGL。htm

1. canvas學習筆記（一）-認識canvas
2. 2、認識python
3. 認識 HTTP/2
4. 2- 認識Netlogo
5. Hive初認識(2)
6. 對於Canvas和Bitmap的一點認識
7. canvas 2
8. 從安裝認識Angular 2
9. 2-重新認識IoC
10. DJango默認（sqlite3）初識2
更多相關文章...
• MySQL默認值（DEFAULT） - MySQL教程
• Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
• Git可視化極簡易教程 — Git GUI使用方法
• Git五分鐘教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。