[譯]Canvas的基本用法

時間 2020-05-24

標籤 canvas 基本用法简体版

原文原文鏈接

`<canvas>` 元素

經過了解html標籤<canvas>自己，讓咱們開始canvas之旅吧。瀏覽器

<canvas id="tutorial" width="150" height="150"></canvas>

<canvas>標籤看起來和<img>標籤長得真像，惟一的不一樣就是<canvas>標籤並無src和alt屬性。app

<canvas> 標籤只有兩個屬性 - 寬度和高度。這些都是可選的，而且一樣利用DOM來設置。當沒有設置寬度和高度的時候，canvas會初始化寬度爲300像素和高度爲150像素。該元素可使用css來定義大小，但在繪製時圖像會伸縮以適應它的框架尺寸。框架

注意: 若是繪製出來的圖像是扭曲的, 嘗試在<canvas>的屬性中明確規定寬和高，而不是使用CSS。

id屬性並非<canvas>元素所特有的而是（幾乎）每個HTML元素（好比class元素）都默認具備的屬性。給每一個標籤都加上一個id屬性是個好主意，由於這樣你就能在咱們的腳本中很容易的找到它。

<canvas>元素能夠像任何一個普通的圖像同樣（有margin，border，background等等屬性）被設計。這些樣式，然而，不會影響在canvas中的實際圖像。咱們將會在該教程中看到這是如何解決的。當沒有爲canvas規定樣式規則的時候其最初將會徹底透明。

替換內容

因爲某些較老的瀏覽器（尤爲是IE9以前的IE瀏覽器）不支持HTML元素"canvas",在這些瀏覽器上你應該展現替代內容。

這很是簡單：咱們只是在<canvas>標籤中提供了替換內容。不支持<canvas>的瀏覽器將會忽略在容器中包含的內容，而且只是正常渲染canvas。

舉個例子，咱們能夠提供對canvas內容的文字描述或者是提供動態生成內容相對應的靜態圖片，以下所示：

<canvas id="stockGraph" width="150" height="150">  current stock price: $3.15 +0.15</canvas><canvas id="clock" width="150" height="150"><img src="p_w_picpaths/clock.png" width="150" height="150" alt=""/></canvas>

`</canvas>` 標籤不可省

與HTML元素<img> 不一樣, HTML<canvas> 元素 須要結束標籤 (</canvas>).

注意:儘管蘋果的Safari早期版本並非必需要求關閉標籤。可是規範規定這是必須的，因此爲了更普遍的兼容性你應該包含它。這些Safari的版本（2.0及更早）除了渲染canvas自己還會渲染替代內容除非你使用CSS技巧(CSS tricks)來掩蓋它。幸運的是，這些版本的Safari的使用者如今已經不多了。

若是不須要替代內容，一個簡單的<canvas id="foo" ...></canvas>在全部支持canvas的瀏覽器中都是徹底兼容的。

渲染上下文（The rendering context如何翻譯）

HTML元素創造了一個固定大小的畫布，它公開了一個或多個渲染上下文。渲染上下文能夠用來繪製和巧妙的處理被現實的頁面。咱們將會將注意力放在2D渲染上下文中。其餘種類的上下文也許提供了不一樣種類的渲染方式；好比， WebGL 使用了基於OpenGL ES的3D上下文 ("experimental-webgl") 。

canvas起初是空白的。爲了展現，首先腳本須要找到渲染上下文，而後在它的上面繪製。canvas元素有一個叫作getContext()的方法，這個方法是用來得到渲染上下文和它的繪畫功能。getContext()只有一個參數，上下文的格式。對於2D圖像而言，如本教程，你可使用「2D」。

var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');

代碼的第一行經過使用"document.getElementById()"方法來爲canvas元素獲得DOM對象。一旦有了元素對象，你能夠經過使用它的getContext() 方法來訪問繪畫上下文。

檢查支持性

替換內容是用於在不支持canvas標籤的瀏覽器中展現的。經過簡單的測試getContext()方法的存在，腳本能夠檢查編程支持性。上面的代碼片斷如今變成了這個樣子：

var canvas = document.getElementById('tutorial');if (canvas.getContext){  var ctx = canvas.getContext('2d');  // drawing code here} else {  // canvas-unsupported code here}

 
           <code  
           class 
           = 
           " language-js" 
           ><span  
           class 
           = 
           "token keyword" 
           > </span></code>

一個模板骨架

這裏的是一個最簡單的模板，咱們以後就能夠把它做爲以後的例子的起點。

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

上面的腳本中包含一個叫作draw()的函數，當頁面加載結束的時候就會執行這個函數。經過使用在文檔上加載時間來完成。只要頁面加載結束，這個函數，或者像是這個的，一樣可使用"window.setTimeout()","window.setInterval()"，或者其餘任何事件處理程序來調用。

模板看起來會是這樣。

一個簡單例子

一開始，讓咱們來看個簡單的例子，咱們繪製了兩個有趣的長方形，其中的一個有着alpha透明度。

咱們將在接下來的例子裏深刻探索一下這是如何工做的。

 1<html> 2<head> 3<script type="application/javascript"> 4function draw() { 5var canvas = document.getElementById("canvas"); 6if (canvas.getContext) { 7var ctx = canvas.getContext("2d"); 8 9        ctx.fillStyle ="rgb(200,0,0)";10        ctx.fillRect (10, 10, 55, 50);1112        ctx.fillStyle ="rgba(0, 0, 200, 0.5)";13        ctx.fillRect (30, 30, 55, 50);14      }15    }16</script>17</head>18<body onload="draw();">19<canvas id="canvas" width="150" height="150"></canvas>20</body>21</html>