日期:2014-05-17  浏览次数:20924 次

HTML5 canvas 新手入门教程

HTML5 canvas 新手入门教程

简述
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ,Firefox 也可以通过插件形式支持 3D canvas

本文介绍 2D canvas基础以及如何使用基本 canvas 函数,如线条、形状、图像和文字等。为了理解此文章,你最好了解 JavaScript 基础知识。
可以点击此处批量下载本文实例代码

?

?本文中的例子的超链接连接到网址全是HTML5网页,目前支持HTML5的浏览器有 Chrom,FireFox 3.6等,IE目前不支持HTML5,也就是说你用IE看本页面的一些例子的超链接是看不到的。

?

?

canvas 基础

创建 canvas 的方法很简单,只需要在 HTML 页面中添加 <canvas>元素:

复制内容到剪贴板
  1. <canvas?id="myCanvas"?width="300"?height="150">? ??
  2. Fallback?content,?in?case?the?browser?does?not?support?Canvas.? ??
  3. </canvas>??

?

为了能在 JavaScript 中引用元素,最好给元素设置 ID ;也需要给 canvas 设定高度和宽度。
创建好了画布后,让我们来准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById函数找到 canvas元素,然后初始化上下文。之后可以使用上下文 API 绘制各种图形。下面的脚本在 canvas 中绘制一个矩形 (点击此处查看效果):

?

复制内容到剪贴板
  1. //?Get?a?reference?to?the?element.? ??
  2. var?elem?=?document.getElementById('myCanvas');? ??
  3. ??
  4. //?Always?check?for?properties?和?methods,?to?make?sure?your?code?doesn't?break?? ??
  5. //?in?other?browsers.? ??
  6. if?(elem?&&?elem.getContext)?{? ??
  7. ??//?Get?the?2d?context.? ??
  8. ??//?Remember:?you?can?only?initialize?one?context?per?element.? ??
  9. ??var?context?=?elem.getCo