Canvas教程

  • 版本网址缩略名: Canvas教程
  • 版本标题: /HTML/Canvas
  • 版本 id: 374717
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论

修订内容

<canvas> 是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也可以是不简单)的动画. 右边的图片展示了一些 <canvas> 的应用,在这个教程后面我们将看到.

<canvas> 最早被Apple引入,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素.  <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中.

这个教程将描述如何在你的HTML页面中使用<canvas>元素. 这些例子为你提供了一些清晰的思路关于你可以用<canvas>来做什么以及如何开始你自己的实践.

开始之前

使用 <canvas> 元素不是非常难但你需要一些基本的HTMLJavaScript知识.

 <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

本教程

另见

{{ Next("Canvas_tutorial/Basic_usage") }}

修订版来源

<p><strong><code><a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">&lt;canvas&gt;</a></code></strong> 是一个可以使用脚本(通常为<a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>)在其中绘制图形的 <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> 元素.它可以用于制作照片集或者制作简单(也可以是不简单)的动画. 右边的图片展示了一些 <code>&lt;canvas&gt;</code> 的应用,在这个教程后面我们将看到.</p>
<p><code>&lt;canvas&gt;</code> 最早被Apple引入,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于<a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a> 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素.&nbsp; <code>&lt;canvas&gt;</code> 元素是<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a>规范的一部分,也包含于HTML 5中.</p>
<p>这个教程将描述如何在你的HTML页面中使用<code>&lt;canvas&gt;元素</code>. 这些例子为你提供了一些清晰的思路关于你可以用&lt;canvas&gt;来做什么以及如何开始你自己的实践.</p>
<h2 id="Before_you_start" name="Before_you_start">开始之前</h2>
<p>使用 <code>&lt;canvas&gt;</code> 元素不是非常难但你需要一些基本的<a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>和<a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>知识.</p>
<p>&nbsp;<code>&lt;canvas&gt;</code> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.</p>
<h2 id="In_this_tutorial" name="In_this_tutorial">本教程</h2>
<ul>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_usage" title="en-US/docs/Canvas_tutorial/Basic_usage">基本用法</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Drawing_shapes" title="en-US/docs/Canvas_tutorial/Drawing_shapes">绘制图形</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Using_images" title="en-US/docs/Canvas_tutorial/Using_images">使用图片</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Applying_styles_and_colors" title="en-US/docs/Canvas_tutorial/Applying_styles_and_colors">样式与颜色</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Transformations" title="en-US/docs/Canvas_tutorial/Transformations">转换</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Compositing" title="en-US/docs/Canvas_tutorial/Compositing">合成</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_animations" title="en-US/docs/Canvas_tutorial/Basic_animations">基本动画</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Optimizing_canvas">优化 canvas</a></li>
</ul>
<h2 id="See_also" name="See_also">另见</h2>
<ul>
  <li><a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">Canvas topic page</a></li>
  <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="en-US/docs/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
  <li><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Canvas examples</a></li>
  <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
  <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="/en-US/docs/Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
  <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="en-US/docs/Adding Text to Canvas">Adding Text to Canvas</a></li>
  <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li>
  <li><a class="link-https" href="https://sites.google.com/site/canvasdraw/" title="https://sites.google.com/site/canvasdraw/">Canvas Drawing Tool</a></li>
  <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Animation Application</a></li>
  <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">interactive canvas tutorial</a></li>
  <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li>
  <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
  <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">How to draw a point with the Canvas API</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
  <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
</ul>
<div>
  {{ Next("Canvas_tutorial/Basic_usage") }}</div>
恢复到这个版本