Canvas 教程

在本文章中

1. 在你开始之前
2. 教程内容
3. 相关资料
4. A note to contributors

<canvas> 是一种可以通过编写脚本（通常是JavaScript）来实现绘制图形的HTML元素。例如，它能用来绘制图形，制作组合图像或者生成简单的 (偶尔 也不简单) 动画。右边的图像展示了<canvas>实现的一些例子，在接下来的教程中我们将会实现它们。

<canvas>第一次出现是被苹果在Mac OS X仪表盘中实现，之后就被应用到Safari和谷歌Chrome中。Gecko1.8及以上的浏览器，比如火狐1.5，同样也支持这个元素。<canvas>标签是WhatWG Web applications 1.0标准化即HTML5的一部分。本教程从基础入手，讲述了如何使用<canvas>标签来绘制2D图像。提供的例子应该会使你了解你能够通过canvas做到的事情并且将会提供一些帮助你开始建立自己的内容的代码片段。

在你开始之前

使用<canvas>元素并没有你想象的那么难，但是你仍然需要对HTML和JavaScript有 一定的了解。<canvas>元素在某些过旧的浏览器中是不被支持的，但是所有主流浏览器的最新版本都已经支持了该元素。canvas的默认 大小是300像素*150像素（宽*高）。但是可以通过使用CSS宽高属性来自定义其大小。为了在canvas中绘制图像我们会使用一个 javascript内容对象（javascript context object这应该如何翻译），它将会创建一个动态图像。

教程内容

• 基本使用
• 绘制图像
• 使用图像
• 添加格式和颜色
• 转换
• 合成
• 动画基础
• 优化 canvas

相关资料

• Canvas topic page
• Drawing Graphics with Canvas
• Canvas examples
• HTML5 Tutorial
• Drawing Text Using a Canvas
• Adding Text to Canvas
• Canvas Demos - Games, applications, tools and tutorials
• Canvas Drawing and Animation Application
• Interactive canvas tutorial
• Canvas Cheat Sheet with all attributes and methods
• Adobe Illustrator to Canvas plug-in
• HTML5CanvasTutorials
• How to draw N grade Bézier curves with the Canvas API
• 31 days of canvas tutorials
• W3C Standard
• HTML5 Canvas tutorials and reference