---
title: Canvas教程
slug: Web/API/Canvas_API/Tutorial
tags:
  - Canvas
  - HTML
  - HTML5
  - Web
  - 中级
  - 图像
  - 教程
  - 画布
  - 进阶
translation_of: Web/API/Canvas_API/Tutorial
---
<div>{{CanvasSidebar}}</div>

<p><a href="/zh-CN/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 315px; width: 140px;"></a></p>

<div class="summary">
<p><a href="/zh-CN/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a>是一个可以使用脚本(通常为<a href="/zh-CN/docs/JavaScript" title="zh-CN/docs/JavaScript">JavaScript</a>)来绘制图形的 <a href="/zh-CN/docs/HTML" title="zh-CN/docs/HTML">HTML</a> 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及<a href="/zh-CN/docs/Web/API/Canvas_API/A_basic_ray-caster">不那么简单的</a>)动画. 右边的图片展示了一些 <code>&lt;canvas&gt;</code> 的实现示例，在这个教程后面我们将看到.</p>
</div>

<p>本篇教程从一些基础开始，描述了如何使用&lt;canvas&gt;元素来绘制2D图形。教程中提供的例子，会让你明白可以用canvas做什么，也会提供一些代码片段来帮助你开始构建自己的内容。</p>

<p><code>&lt;canvas&gt;</code> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。</p>

<h2 id="Before_you_start" name="Before_you_start">开始之前</h2>

<p>使用 <code>&lt;canvas&gt;</code> 元素不是非常难，但你需要一些基本的<a href="/zh-CN/docs/HTML" title="zh-CN/docs/HTML">HTML</a>和<a href="/zh-CN/docs/JavaScript" title="zh-CN/docs/JavaScript">JavaScript</a>知识。除一些过时的浏览器不支持<code>&lt;canvas&gt;</code> 元素外，所有的新版本主流浏览器都支持它。Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个JavaScript上下文对象，它能动态创建图像（ creates graphics on the fly）。</p>

<h2 id="In_this_tutorial" name="In_this_tutorial">本教程包含</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="zh-CN/docs/Canvas_tutorial/Basic_usage">基本用法</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="zh-CN/docs/Canvas_tutorial/Drawing_shapes">绘制图形</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">使用样式与颜色</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">绘制文本</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images">使用图像</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations">变形</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">合成和剪辑</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="zh-CN/docs/Canvas_tutorial/Basic_animations">基本动画</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">高级动画</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">像素处理</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">点击区域和无障碍访问</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">优化 canvas</a></li>
 <li><a href="/zh-CN/docs/Web/API/Canvas_API/Tutorial/Finale">终曲</a></li>
</ul>

<h2 id="See_also" name="See_also">相关链接</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas 专题页</a></li>
 <li><a href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
 <li><a href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 Canvas教程</a></li>
</ul>

<p>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</p>