[译]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>

例子看起来像是这样：:

Screenshot