html5游戏开发系列 二维绘图上下文context
在开始canvas之前 发现调用了许多的有关context的方法。
因此在之前先看了下context。
1、概念
顾名思义，context上下文，在html5中应该支持2d 和3d的上下文。在此只探讨2d
当使用一个 canvas 元素的 getContext(“2d” )方法时，返回的是CanvasRenderingContext2D 对象，其内部表现为笛卡尔平面坐标，并且左上角坐标为(0,0)，在本平面中往右则 x 坐标增加和往下方 y 坐标增加。每一个 canvas 元素仅有一个上下文对象。其2、接口
接口如下：
interface CanvasRenderingContext2D {
// back-reference to the canvas
readonly attribute HTMLCanvasElement canvas;
// state
void save(); // push state on state stack
void restore(); // pop state stack and restore state
// transformations (default transform is the identity matrix)
void scale(unrestricted double x, unrestricted double y);
void rotate(unrestricted double angle);
void translate(unrestricted double x, unrestricted double y);
void transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
void setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
// compositing
attribute unrestricted double globalAlpha; // (default 1.0)
attribute DOMString globalCompositeOperation; // (default source-over)
// colors and styles (see also the CanvasDrawingStyles interface)
attribute (DOMString or CanvasGradient or CanvasPattern) strokeStyle; // (default black)
attribute (DOMString or CanvasGradient or CanvasPattern) fillStyle; // (default black)
CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
CanvasPattern createPattern((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, [TreatNullAs=Emptytring]DOMString repetition);
// shadows
attribute unrestricted double shadowOffsetX; // (default 0)
attribute unrestricted double shadowOffsetY; // (default 0)
attribute unrestricted double shadowBlur; // (default 0)
attribute DOMString shadowColor; // (default transparent black)
// rects
void clearRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
void fillRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
void strokeRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
// path API (see also CanvasPathMethods)
void beginPath();
void fill();
void stroke();
void drawFocusIfNeeded(Element element);
void clip();
boolean isPointInPath(unrestricted double x, unrestricted double y);
// text (see also the CanvasDrawingStyles interface)
void fillText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
void strokeText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
TextMetrics measureText(DOMString text);
// drawing images
void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy);
void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
// hit regions
void addHitRegion(HitRegionOptions options);
void removeHitRegion(DOMString id);
void clearHitRegions();
// pixel manipulation
ImageData createImageData(unrestricted double sw, unrestricted double sh);
ImageData createImageData(ImageData imagedata);
ImageData getImageData(double sx, double sy, double sw, double sh);
void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
void putImageData(ImageData imagedata, double dx, double dy);
};
CanvasRenderingContext2D implements CanvasDrawingStyles;
CanvasRenderingContext2D implements CanvasPathMethods;
[NoInterfaceObject]
interface CanvasDrawingStyles {
// line caps/joins
attribute unrestricted double lineWidth; // (default 1)
attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
attribute unrestricted double miterLimit; // (default 10)
// dashed lines
void setLineDash(sequence<unrestricted double> segments); // default empty
sequence<unrestricted double> getLineDash();
attribute unrestricted double lineDashOffset;
// text
attribute DOMString font; // (default 10px sans-serif)
attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
};
[NoInterfaceObject]
interface CanvasPathMethods {
// shared path API methods
void closePath();
void moveTo(unrestricted double x, unrestricted double y);
void lineTo(unrestricted double x, unrestricted double y);
void quadraticCurveTo(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y);
void bezierCurveTo(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y);
void arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius);
void rect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
void arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false);
};
interface CanvasGradient {
// opaque object
void addColorStop(double offset, DOMString color);
};
interface CanvasPattern {
// opaque object
};
interface TextMetrics {
readonly attribute double width;
};
dictionary HitRegionOptions {
// dictionary to allow expansion on Hit Regions in Canvas Context 2D Level 2
DOMString id = "";
// for control-backed regions:
Element? control = null;
};
interface ImageData {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
readonly attribute Uint8ClampedArray data;
3、CanvasRenderingContext2D 对象的属性
canvas 属性
这个环境可以绘制于其上的 Canvas 元素。
fillStyle 属性
用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时，它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象，通过使用指定的渐变或模式来完成填充。
globalAlpha 属性
指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0。
globalCompositeOperation 属性
指定颜色如何与画布上已有的颜色组合（合成）。如需更多细节，请参阅 globalCompositeOperation 属性参考页。
lineCap 属性
指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。如需更多细节，请参阅 lineCap 属性参考页。
lineJoin 属性
指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。如需更多细节，请参阅 lineJoin 属性参考页。
lineWidth 属性
指定了画笔（绘制线条）操作的线条宽度。默认值是 1.0，并且这个属性必须大于 0.0。较宽的线条在路径上居中，每边有线条宽的一半。
miterLimit 属性
当 lineJoin 属性为 "miter" 的时候，这个属性指定了斜连接长度和线条宽度的最大比率。如需更多细节，请参阅 miterLimit 属性参考页。
shadowBlur 属性
指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
shadowColor 属性
把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串，并且可以包含一个 alpha 部分来表示透明度。默认值是 black。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
shadowOffsetX, shadowOffsetY 属性
指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持，但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
strokeStyle 属性
指定了用于画笔（绘制）路径的颜色、模式和渐变。这个属性可能是一个字符串，或者一个 CanvasGradient 对象 或CanvasPattern 对象。如果是一个字符串，它被解析为一个 CSS 颜色值，并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象，画笔使用这个渐变或模式来实现。
4、CanvasRenderingContext2D 对象的方法
| 方法 | 描述 |
|---|---|
| arc() | 用一个中心点和半径，为一个画布的当前子路径添加一条弧线。 |
| arcTo() | 使用目标点和一个半径，为当前的子路径添加一条弧线。 |
| beginPath() | 开始一个画布中的一条新路径（或者子路径的一个集合）。 |
| bezierCurveTo() | 为当前的子路径添加一个三次贝塞尔曲线。 |
| clearRect() | 在一个画布的一个矩形区域中清除掉像素。 |
| clip() | 使用当前路径作为连续绘制操作的剪切区域。 |
| closePath() | 如果当前子路径是打开的，就关闭它。 |
| createLinearGradient() | 返回代表线性颜色渐变的一个 CanvasGradient 对象。 |
| createPattern() | 返回代表贴图图像的一个 CanvasPattern 对象。 |
| createRadialGradient() | 返回代表放射颜色渐变的一个 CanvasGradient 对象。 |
| drawImage() | 绘制一幅图像。 |
| fill() | 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。 |
| fillRect() | 绘制或填充一个矩形。 |
| lineTo() | 为当前的子路径添加一条直线线段。 |
| moveTo() | 设置当前位置并开始一条新的子路径。 |
| quadraticCurveTo() | 为当前路径添加一条贝塞尔曲线。 |
| rect() | 为当前路径添加一条矩形子路径。 |
| restore() | 为画布重置为最近保存的图像状态。 |
| rotate() | 旋转画布。 |
| save() | 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。 |
| scale() | 标注画布的用户坐标系统。 |
| stroke() | 沿着当前路径绘制或画一条直线。 |
| strokeRect() | 绘制（但不填充）一个矩形。 |
| translate() | 转换画布的用户坐标系统。 |
5、主要用途：
绘制矩形
可以使用 strokeRect() 和 fillRect() 来绘制矩形的边框和填充矩形。此外，可以使用 clearRect() 来清除矩形所定义的区域。
绘制图像
在 Canvas API 中，图像通过表示 HTML <img> 元素的 Image 对象来指定，或者通过使用 Image() 构造函数所创建的屏幕外图像来指定。一个 Canvas 对象也可以用作图像来源。
可以使用 drawImage() 方法在一个画布上绘制图像；而更为常见的形式是，允许源图像的任意矩形区域缩放或绘制到画布上。
创建和渲染路径
画布的一项强大功能是，它能够从基本的绘图操作来构建图形，然后，绘制这些图形的框架（勾勒它们）或者给这些图形的内容涂色（填充它们）。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。
为了构建一个多条线段所构成的一个连续的封闭形状，绘制操作之间需要一个连接点。为此，画布保存了一个当前位置。画布绘制操作显式地使用这个位置作为它们的起始点，并且更新它直到到达终点。可以把这看做是使用钢笔或纸来绘画：当您完成了一条具体的线段或曲线，当前位置就是完成这一操作之后钢笔所停留的点。
可以在当前路径中创建一系列互相不连续的形状，它们都使用同样的绘制参数一起渲染。要分隔开这些形状，请使用 moveTo() 方法，这个方法把当前的位置移动到一个新的位置而不添加一条连接线段。当您这么做的时候，就创建了一条新的路径，这是用来表示一组连接起来的操作的画布术语。
一旦您所想要的路径形成了，可以使用 stroke() 绘制其边框，使用 fill() 来绘制其内容；或者两件事都做。
可用的图形操作有：用来绘制直线的 lineTo()，用于绘制矩形的 rect()，用于绘制部分圆形的 arc() 或 arcTo()，以及用于绘制曲线的bezierCurveTo() 或 quadraticCurveTo()。
除了勾勒和填充，还可以使用当前路径来指定绘制时画布所使用的剪切区域。这个区域中的像素是显示的，区域之外的像素是不显示的。剪切区域是累加性的；调用 clip() 可以将当前路径和当前绘制区域取交集，产生一个新的区域。不幸的是，没有直接的方法把当前的剪切区域设置为画布的范围；要做到这一点，必须保存和恢复画布的整个图形状态。
如果任何子路径中的线段没有形成一个闭合的图形，fill() 和 clip() 操作通过添加一条从子路径的起点到终点的、虚拟（勾勒的时候看不到）线段来闭合它。可选的是，也可以调用 closePath() 来显示地添加这条线段。
颜色、渐变和模式
在填充和勾勒路径时，可用 fillStyle 和 strokeStyle 属性来指定线段或者绘制区域如何绘制。CSS 样式颜色字符串，以及描述渐变和模式的 CanvasGradient 或 CanvasPattern 都是可以接受的。要创建一个渐变，请使用 createLinearGradient() 或createRadialGradient()。要创建一个模式，请使用 createPattern()。
要用 CSS 表示法来指定不透明的颜色，就采用 "#RRGGBB" 形式的字符串，其中 RR、GG 和 BB 分别是指定颜色的红色、绿色和蓝色成分的十六进制，其值都在 00 和 FF 之间。例如，完全红色的值是 "#FF0000"。要指定部分透明的颜色，请使用一个 "rgba(R,G,B,A)" 形式的字符串。在这种形式中，R、G 和 B 将颜色的红色、绿色和蓝色成分指定为 0 到 255 之间的十进制整数，并且 A 把 alpha（不透明）成分指定为 0.0 （完全透明）和 1.0 （完全不透明）之间的一个浮点数值。例如，半透明的完全红色为 "rgba(255,0,0,0.5)"。
线条宽度、线帽和线条连接
画布为调整各种线条显示提供了几个选项。可以使用 lineWidth 属性来指定线条的宽度，用 lineCap 属性来指定的端点如何绘制，并且用 lineJoin 属性来指定线条如何连接。
坐标空间和转换
默认情况下，一个画布的坐标空间使用画布的左上角 (0,0) 作为原点，x 值向右增加，y 值向下增加。这个坐标空间中的一个单位通常转换为像素。
然后，可以转换坐标空间，产生你在绘图操作中所指定的用来移动、缩放或旋转的任何坐标或范围。这通过 translate()、scale() 和rotate() 方法来实现，它们会对画布的变换矩阵产生影响。由于坐标空间可以像这样转换，您传递给 lineTo() 这样方法的坐标可能无法用像素来度量。因此，Canvas API 使用浮点数而不是整数。
变换按照它们被指定的顺序相反的顺序来处理。例如，调用 scale() 之后，紧接着调用 translate()，这会首先变换坐标系统，然后再缩放。
组合
通常，图形是一个绘制于另一个的上面，新的图形使得在它之前绘制在其下方的图形变得模糊。这是一个画布中的默认行为。然而，您可以通过为 globalCompositeOperation 属性指定不同的值来执行很多有趣的操作，范围包括从 XOR 操作到增量或减暗图形区域。
阴影
Canvas API 包含了可以自动为您所绘制的任何图形添加下拉阴影的属性。然而，在编写本参考页时，Safari 是唯一实现了这一 API 的浏览器。阴影的颜色可用 shadowColor 属性来指定，并且可以通过 shadowOffsetX 和 shadowOffsetY 属性来改变。另外，应用到阴影边缘的羽化量也可以使用 shadowBlur 属性来设置。
保存图形状态
save() 和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态推入到栈中，而 restore() 从栈的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。
CanvasRenderingContext2D 对象的所有属性（除了画布的属性是一个常量）都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分，但是当前路径和当前点并不是。
参考资料： canvas_2d_规范 http://www.w3.org/TR/2dcontext/
w3cschool Dom http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp