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