HTML5 canvas 元素详细教程一

2020-02-10 13:29:58

字体：大中小

来源：转载

供稿：网友

HTML5 canvas 元素详细教程一：基本用法。

<canvas>是Html5中一个全新的元素，它可以被JavaScript语言用来绘制图形。最先<canvas>是在苹果公司的Mac OS X Dashboard上被引入，他被应用于Safari，而后基于Gecko1.8的浏览器，也支持这个新的元素，例如Firefox浏览器。如今，<canvas>元素已是HTML5标准规范的一部分。

<canvas>能做什么，我们都将通过本教程向大家讲解，并且可以作为你应用<canvas>的起点。学习<canvas>元素并不困难，只需要具有HTML和JavaScript的基础知识，还要Firefox浏览器，Safari最新版或者Opera9+,这样才能看到所有的示例效果。

现在我们就从如何定义<canvas>元素开始吧。

<canvas>元素只有两个属性Width和Height，这些属性都是可选的，并且可以使用DOM或css来控制。如果不设置width和height，则使用默认的宽300像素，高150像素。虽然可以通过css来控制和调整<canvas>的大小，但是渲染图像会进行缩放来适应布局，一旦发现渲染结果看上去变形，不必非要依赖css，你可以通过在<canvas>中显示的指定width和height的值。就像标准的HTML标签一样，也可以定义id属性，这样可以使得脚本应用更加方便。<canvas>元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。

因为该元素相对较新，并不是所有的浏览器都支持该元素，所我们要为那些不能正常浏览的提供替用的显示信息，它可以使用文本也可以使用图片：

<canvas id="stockGraph" width="150" height="150"> 
  您的浏览器不支持<canvas>元素。 
</canvas> 
<canvas id="clock" width="150" height="150"> 
  <img src="images.png" width="150" height="150" alt="替换图片"/> 
</canvas>

在Apple Safari里，<canvas>的实现跟<img>很相似，它没有结束标签。然而，为了使<canvas> 能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签(</canvas>)是必须的。如果没有替用内容，<canvas id="foo" ...></canvas> 对Safari 和Mozilla 是完全兼容的——Safari 会简单地忽略结束标签。如果有替用内容，那么可以用一些CSS 技巧来为并且仅为Safari 隐藏替用内容，因为那些替用内容是需要在IE 里显示但不需要在Safari 里显示。

<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文，通过它们可以来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的3D渲染。

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

我们来讲解下上面的代码，<canvas> 初始化是空白的，要使用脚本画图首先需要渲染上下文（rendering context），它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图需要调用的函数。getContext() 接受一个用于描述其类型的值作为参数。上面第一行通过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 的函数，它会在页面装载完毕之后执行一次（通过设置body 标签的onload 属性），它当然也可以在setTimeout，setInterval，或者其他事件处理函数中被调用。

作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。

<html> 
<head> 
<script type="application/x-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>