HTML5:Canvas-繪製圖形

時間 2020-05-17

原文原文鏈接

到本文的最後，你將學會如何繪製矩形，三角形，直線，圓弧和曲線，變得熟悉這些基本的形狀。繪製物體到Canvas前，需掌握路徑，咱們看看到底怎麼作。javascript

柵格css

在咱們開始畫圖以前，咱們須要瞭解一下畫布柵格（canvas grid）以及座標空間。上一頁中的HTML模板中有個寬150px, 高150px的canvas元素。如右圖所示，canvas元素默認被網格所覆蓋。一般來講網格中的一個單元至關於canvas元素中的一像素。柵格的起點爲左上角（座標爲（0,0））。全部元素的位置都相對於原點定位。因此圖中藍色方形左上角的座標爲距離左邊（X軸）x像素，距離上邊（Y軸）y像素（座標爲（x,y））。在課程的最後咱們會平移原點到不一樣的座標上，旋轉網格以及縮放。如今咱們仍是使用原來的設置。html

繪製矩形

不一樣於SVG，HTML中的元素canvas只支持一種原生的圖形繪製：矩形。全部其餘的圖形的繪製都至少須要生成一條路徑。不過，咱們擁有衆多路徑生成的方法讓複雜圖形的繪製成爲了可能。java

首先，咱們回到矩形的繪製中。canvas提供了三種方法繪製矩形：canvas

1 fillRect(x, y, width, height): 繪製一個填充的矩形
1 strokeRect(x, y, width, height): 繪製一個矩形的邊框
1 clearRect(x, y, width, height): 清除指定矩形區域，讓清除部分徹底透明。

上面提供的方法之中每個都包含了相同的參數。x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。width和height設置矩形的尺寸。函數

下面的draw() 函數是前一頁中取得的，如今就來使用上面的三個函數。spa

矩形例子

 1 function draw() {  2  var canvas = document.getElementById('canvas');  3  if (canvas.getContext) {  4  var ctx = canvas.getContext('2d');  5 
 6  ctx.fillRect(25,25,100,100);  7  ctx.clearRect(45,45,60,60);  8  ctx.strokeRect(50,50,50,50);  9  } 10 }

輸出以下：3d

fillRect()函數繪製了一個邊長爲100px的黑色正方形。clearRect()函數從正方形的中心開始擦除了一個60*60px的正方形，接着strokeRect()在清除區域內生成一個50*50的正方形邊框。code

接下來咱們可以看到clearRect()的兩個可選方法，而後咱們會知道如何改變渲染圖形的填充顏色及描邊顏色。htm

不一樣於下一節所要介紹的路徑函數（path function），以上的三個函數繪製以後會立刻顯如今canvas上，即時生效。

ps：你也能夠設置邊框的大小

lineWidth = 2;

可是得注意,須要在strokeRect的前面使用不然不會顯示出來

繪製路徑

圖形的基本元素是路徑。路徑是經過不一樣顏色和寬度的線段或曲線相連造成的不一樣形狀的點的集合。一個路徑，甚至一個子路徑，都是閉合的。使用路徑繪製圖形須要一些額外的步驟。

首先，你須要建立路徑起始點。
而後你使用畫圖命令去畫出路徑。
以後你把路徑封閉。
一旦路徑生成，你就能經過描邊或填充路徑區域來渲染圖形。

如下是所要用到的函數：

beginPath(): 新建一條路徑，生成以後，圖形繪製命令被指向到路徑上生成路徑。
closePath(): 閉合路徑以後圖形繪製命令又從新指向到上下文中。
stroke(): 經過線條來繪製圖形輪廓。
fill(): 經過填充路徑的內容區域生成實心的圖形。

生成路徑的第一步叫作beginPath()。本質上，路徑是由不少子路徑構成，這些子路徑都是在一個列表中，全部的子路徑（線、弧形、等等）構成圖形。而每次這個方法調用以後，列表清空重置，而後咱們就能夠從新繪製新的圖形。

注意：當前路徑爲空，即調用beginPath()以後，或者canvas剛建的時候，第一條路徑構造命令一般被視爲是moveTo（），不管其實是什麼。出於這個緣由，你幾乎老是要在設置路徑以後專門指定你的起始位置。

第二步就是調用函數指定繪製路徑，本文稍後咱們就能看到了。

第三，就是閉合路徑closePath(),不是必需的。這個方法會經過繪製一條從當前點到開始點的直線來閉合圖形。若是圖形是已經閉合了的，即當前點爲開始點，該函數什麼也不作。

注意：當你調用fill()函數時，全部沒有閉合的形狀都會自動閉合，因此你不須要調用closePath()函數。可是調用stroke()時不會自動閉合。

　咱們來看一個例子用canvas畫三角形

 1 <html>
 2   <head>
 3     <title>Canvas tutorial</title>
 4     <script type="text/javascript">
 5       function draw(){  6         var canvas = document.getElementById('tutorial');  7         if (canvas.getContext){  8           var ctx = canvas.getContext('2d');  9           
10  ctx.beginPath(); 11           ctx.moveTo(47,60); 12           ctx.lineTo(80,20); 13           ctx.lineTo(117,60); 14  ctx.fill(); 15           
16  } 17  } 18     </script>
19     <style type="text/css">
20  canvas { border: 1px solid black; } 21     </style>
22   </head>
23   <body onload="draw();">
24     <canvas id="tutorial" width="150" height="150"></canvas>
25   </body>
26 </html>

顯示以下的三角形

moveTo（47，60）就是從柵格里面找到寬度47,高度60的位置（起點位置）

lineTo(80，20) 就是從柵格里面找到寬度80，高度20的位置（終點位置）而後起點鏈接這個位置

lineTo(117,60);就是從柵格里面找到寬度117，高度60的位置,在鏈接這個位置就造成了三角形

再看下面的例子：

 1 function draw() {  2  var canvas = document.getElementById('canvas');  3  if (canvas.getContext){  4  var ctx = canvas.getContext('2d');  5 
 6  // 填充三角形
 7  ctx.beginPath();  8  ctx.moveTo(25,25);  9  ctx.lineTo(105,25); 10  ctx.lineTo(25,105); 11  ctx.fill(); 12 
13  // 描邊三角形
14  ctx.beginPath(); 15  ctx.moveTo(125,125); 16  ctx.lineTo(125,45); 17  ctx.lineTo(45,125); 18  ctx.closePath(); 19  ctx.stroke(); 20  } 21 }

這裏從調用beginPath()函數準備繪製一個新的形狀路徑開始。而後使用moveTo()函數移動到目標位置上。而後下面，兩條線段繪製後構成三角形的兩條邊。

你會注意到填充與描邊三角形步驟有所不一樣，

由於路徑使用填充（filled）時，路徑自動閉合，使用描邊（stroked）則不會閉合路徑。若是沒有添加閉合路徑closePath()到描述三角形函數中，則只繪製了兩條線段，並非一個完整的三角形。

圓弧

繪製圓弧（圓上任意兩點就是圓弧）或者圓,咱們使用arc方法,當前可使用arcTo,不過相對arc更加簡單上手度高

arc（x, y, radius, startAnglem endAngle, anticlockwise）

arc有六個參數

x，就是x軸

y，就是y軸

radius,就是半徑

startAnglem 開始的弧度

endAngle 結束的弧度

anticlockwise 可選,默認按順時針,可選逆時針

先來個例子：

 1 <html>
 2   <head>
 3     <title>Canvas tutorial</title>
 4     <script type="text/javascript">
 5  function draw(){  6         var canvas = document.getElementById('tutorial');  7         if (canvas.getContext){  8           var ctx = canvas.getContext('2d');  9           ctx.arc(50,50,40,0, Math.PI); 10  ctx.stroke(); 11  } 12  } 13     </script>
14     <style type="text/css">
15  canvas { border: 1px solid black; } 16     </style>
17   </head>
18   <body onload="draw();">
19     <canvas id="tutorial" width="150" height="150"></canvas>
20   </body>
21 </html>