HTML5.Canvas.教程.pdf

HTML5 Canvas 教程 原作者：Eric Rowell 原文地址：/ 翻译：ysm @ 译者注：本文是来自于网络上的一个教程，英文原版在 /。原文比较简单明了，适合初学入门，跟着上面的代码 很快就能学会 HTML5 的 Canvas 基本的绘图功能。本文就是根据此文翻译而来，只不过原文中有些地 方个人感觉介绍得过于简单，因此结合其他相关材料，根据自己的理解，对某些章节的内容略作修改。 如有什么不够准确的地方，请不吝赐教。谢谢。 Part 1: HTML5 Canvas 教程基础篇 欢迎来到基础篇部分。在此，我们将主要看一下 HTML5 Canvas的基本绘图功能，包括画直线、画 路径、图形绘制、渐变、 模式、图像和文本。 学前准备： 在开始基础教程之前，您首先需要准备一个不太旧的 web浏览器，比如 Google Chrome ， Firefox， Safari， Opera， 或者 IE9这些都可以。然后您需要对 Javascript有一定的熟悉，并 且还得有一个文本编辑器，比如 notepad。 1.1 HTML5 Canvas 1.1.1 HTML5 Canvas 的元素 在 HTML5页面里， canvas就是像div， a， 或 table之类的一种标签，所不同的是， canvas需要用 Javascript来渲染。要使用 canvas，我们就需要在 HTML5文件的适当位置添加 canvas标签，然后创建一个 Javascript初始化函数，使这个函数在页面加载的时候就执行，同时在 函数里用调用 HTML5 Canvas API在 canvas上画图就可以了。 比如我们像下面这样添加一个 id为 myCanvas的 canvas标签： body canvas id=myCanvas/canvas /body 然后添加初始化 Javascript函数： !DOCTYPE HTML html head script window.onload = function() { var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); // 在此添加绘图代码 }; /script /head body canvas id=myCanvas width=578 height=200/canvas /body /html HTML5 Canvas 有关元素的说明 上述代码将在本文后续中作为 HTML5 Canvas程序的基本模板。就像其他 HTML标签一样，我们也 可以用 canvas标签的 height 和 width属性为 canvas指定其在页面上高度和宽度。在初始化 Javascript函数中，我们可以用 canvas标签的 id获得 canvas的 DOM对象，并用 getContext() 方法获得这个 canvas的“2d”上下文对象，其后的绘图操作都将以此上下文对象为基础。 1.2 直线 1.2.1 画直线 画直线的功能可以用 beginPath()， moveTo()， lineTo() 和 stroke() 几个方法的组合来 实现。 如： script context.beginPath(); context.moveTo(x,y); context.lineTo(x,y); context.stroke(); /script 效果图 代码 !DOCTYPE HTML html head style body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } /style script window.onload = function() { var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); context.beginPath(); context.moveTo(100, 150); context.lineTo(450, 50); context.stroke(); }; /scri