HTML5 canvas 初级入门教程

HTML5 canvas 初级入门教程
HTML5 canvas 即 HTML5 画布，是一个现代浏览器都支持的 HTML5 非插件绘图的功能，本 文将展示如何通过 HTML5 canvas API 操作 canvas 元素、绘制图形、改变绘图颜色以及删 除图形，让我们开始进入这很酷的新技术的短暂旅行吧。
canvas 元素简介
使用 canvas 元素相当简单，它只是一个单纯的 HTML 标签，外加宽高两个特性。

上面的代码在页面中插入了一个透明的画布，canvas 元素内部的内容可以在不支持 canvas 功能的浏览器下显示你想给你的用户提供的信息，联想下

探索 2d 渲染环境
我们上面提到的 canvas 元素只是 canvas 功能的一部分，另一部分是 2d 渲染环境，它可以 让你实现很酷的看得到的东西。 需要完全理清的是：当你使用 canvas，你不是在 canvas 元素上画图，事实上你是在 canvas 元素内部的 2d 渲染环境上。
坐标系统
如果你曾经使用过 2d 绘图编程语言（比如 ActionScript、Processing 等），你应该会了解基 于屏幕（screen-based）的坐标系统。canvas 内部的 2d 渲染环境并没有什么不同之处，它 采用标准的笛卡尔坐标系统，原点位于屏幕左上角，向右移动会增加 x 坐标的值，向下移动 会增加 y 坐标的值，很容易理解。
通常坐标系统的单位是屏幕的 1 像素。
操作 2d 渲染环境
需要利用 Javascript 提供的 API 来获取 2d 渲染环境对象，该方法为：getContext()，看下简 单的例子：

通过调用 canvas 对象的 getContext()方法，c 变量就包含了指向 2d 渲染环境的引用，这意 味着你现在已经完成了在画布上绘图的一切准备，接下来可以开始绘图了。
绘制矩形
获得了 2d 渲染环境对象，就可以通过调用 API 提供的大量方法来进行绘图了，一个最基本 的方法就是 fillRect()，通过它可以绘制一个填充颜色的矩形（颜色默认值为黑色）。 在 c 变量的下面增加以下代码：
c.fillRect(0, 0, 50, 50);
这将在画布左上角绘制绘制一个黑色背景的正方形：
在调用 fillRect()方法时传入了 4 个参数：
   
第一个是基于原点的 x 坐标位置 第二个是基于原点的 y 坐标位置 第三个是宽度 第四个是高度 fillRect 的伪代码看起来应该像这个样子：
c.fillRect(x, y, width, height);
很酷的是，不仅可以绘制填充的矩形，你还可以绘制线框矩形，使用 strokeRect()方法，绘 制四周产生描边效果的矩形，如：

c.strokeRect(50, 50, 100, 100);
strokeRect 的参数与 fillRect 是一致的，绘制的结果如下：
利用 canvas 绘图，简单、优美，所有的方法都很易懂，但是当放在一起使用可以让你画出 很漂亮的图形。
绘制路径
矩形是唯一一个可以通过单个 API 方法绘制的图形，先把它放在一边，我们来学习下路径 （Paths）绘制。使用路径，可以绘制线条、连续的曲线以及复合图形。 绘制一个简单的路径需要利用一些 AIP 方法：
beginPath 开始一个新路径 moveTo 移动路径的绘图起点 lineTo 从 moveTo 定义的点开始绘制连续的路径，或者从上一次的 lineTo 的终点开始绘制。 closePath 连接最后的点和最初的点并关闭路径绘制 fill 用颜色填充路径 stroke 描变路径
尝试执行下面的代码：
c.beginPath(); c.moveTo(50, 50); c.lineTo(50, 250); c.lineTo(250, 250); c.closePath; c.fill();

执行结果为：
你可以用同样的方法绘制你希望的图形，canvas 还包含更高级的路径绘制，比如圆弧（可 以绘制圆形）和贝塞尔曲线（用于绘制很酷的曲线效果），总之，绘制路径要比绘制矩形复 杂的多。
改变颜色
到目前为止，我们的示例所绘制的都是填充或描边的黑色，canvas 也提供了一些属性用于 改变绘制图形的颜色，它们是 fillStyle 和 strokeStyle，它们的语法都是可以自解释的，所以 我们直接来改变一个矩形的填充颜色：
c.fillStyle = "rgb(255, 0, 0)"; c.fillRect(50, 50, 100, 100);
结果：
或者，你可以改变描边的颜色：
c.strokeStyle = "rgb(255, 0, 0)"; c.strokeRect(50, 50, 100, 100);
结果：