[译]Canvas的基本用法

时间：2023-03-09 22:18:45
[译]Canvas的基本用法

<canvas> 元素

通过了解html标签<canvas>本身，让我们开始canvas之旅吧。

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

<canvas>标签看起来和<img>标签长得真像，唯一的不同就是<canvas>标签并没有src和alt属性。

<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="data:images/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
}
 

一个模板骨架

这里的是一个最简单的模板，我们之后就可以把它作为之后的例子的起点。

 <html>
   <head>
     <title>Canvas tutorial</title>
     <script type="text/javascript">
       function draw(){
         var canvas = document.getElementById('tutorial');
         if (canvas.getContext){
           var ctx = canvas.getContext('2d');
         }
       }
     </script>
     <style type="text/css">
       canvas { border: 1px solid black; }
     </style>
   </head>
   <body onload="draw();">
     <canvas id="tutorial" width="150" height="150"></canvas>
   </body>
 </html>
 

上面的脚本中包含一个叫做draw()的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载时间来完成。只要页面加载结束，这个函 数，或者像是这个的，同样可以使用"window.setTimeout()","window.setInterval()"，或者其他任何事件处理程 序来调用。

模板看起来会是这样。

一个简单例子

一开始，让我们来看个简单的例子，我们绘制了两个有趣的长方形，其中的一个有着alpha透明度。

我们将在接下来的例子里深入探索一下这是如何工作的。

 <html>
  <head>
   <script type="application/javascript">
     function draw() {
       var canvas = document.getElementById("canvas");
       if (canvas.getContext) {
         var ctx = canvas.getContext("2d");

         ctx.fillStyle = "rgb(200,0,0)";
         ctx.fillRect (10, 10, 55, 50);

         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
         ctx.fillRect (30, 30, 55, 50);
       }
     }
   </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
 </html>
 

例子看起来像是这样：:

Screenshot
[译]Canvas的基本用法

相关文章