interface CanvasRenderingContext2D {
// 反向引用到canvas
readonly attribute HTMLCanvasElement canvas;
// 状态
void save(); // 将当前状态存入状态栈。
void restore(); // 从状态栈弹出一个状态，并还原该状态。
// 变换（默认变换为单位矩阵）
void scale(in double x, in double y);
void rotate(in double angle);
void translate(in double x, in double y);
void transform(in double a, in double b, in double c, in double d, in double e, in double f);
void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);
// 合成
attribute double globalAlpha; // （默认：1.0）
attribute DOMString globalCompositeOperation; // （默认：source-over）
// 颜色和样式
attribute any strokeStyle; // （默认：黑色）
attribute any fillStyle; // （默认：黑色）
CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);
CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);
CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);
// 线帽、连线
attribute double lineWidth; // （默认：1）
attribute DOMString lineCap; // “butt”、“round”、“square”（默认：“butt”）
attribute DOMString lineJoin; // “round”、“bevel”、“miter”（默认：“miter”）
attribute double miterLimit; // （默认：10）
// 阴影
attribute double shadowOffsetX; // （默认：0）
attribute double shadowOffsetY; // （默认：0）
attribute double shadowBlur; // （默认：0）
attribute DOMString shadowColor; // （默认：transparent black）
// 矩形
void clearRect(in double x, in double y, in double w, in double h);
void fillRect(in double x, in double y, in double w, in double h);
void strokeRect(in double x, in double y, in double w, in double h);
// 路径API
void beginPath();
void closePath();
void moveTo(in double x, in double y);
void lineTo(in double x, in double y);
void quadraticCurveTo(in double cpx, in double cpy, in double x, in double y);
void bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);
void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius);
void rect(in double x, in double y, in double w, in double h);
void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);
void fill();
void stroke();
void clip();
boolean isPointInPath(in double x, in double y);
// 焦点管理
boolean drawFocusRing(in Element element, in optional boolean canDrawCustom);
// 插入符号和选择管理
long caretBlinkRate();
boolean setCaretSelectionRect(in Element element, in double x, in double y, in double w, in double h);
// 文本
attribute DOMString font; // （默认：10px sans-serif）
attribute DOMString textAlign; // “start”、“end”、“left”、“right”、“center”（默认：“start”）
attribute DOMString textBaseline; // “top”、“hanging”、“middle”、“alphabetic”、“ideographic”、“bottom”（默认：“alphabetic”）
void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);
void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);
TextMetrics measureText(in DOMString text);
// 绘制图片
void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
// 像素操作
ImageData createImageData(in double sw, in double sh);
ImageData createImageData(in ImageData imagedata);
ImageData getImageData(in double sx, in double sy, in double sw, in double sh);
void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);
};
interface CanvasGradient {
// 不透明对象
void addColorStop(in double offset, in DOMString color);
};
interface CanvasPattern {
// 不透明对象
};
interface TextMetrics {
readonly attribute double width;
};
interface ImageData {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
readonly attribute CanvasPixelArray data;
};
interface CanvasPixelArray {
readonly attribute unsigned long length;
getter octet (in unsigned long index);
setter void (in unsigned long index, in octet value);
};
canvas
释义
canvas属性必须返回上下文将绘制到的canvas元素。
save()
释义
save()方法必须将当前绘制状态的一个副本推入绘制状态栈。
restore()
释义
restore()方法必须从绘制状态栈中取出一个实体，并重置其描述的绘制状态。如果没有保存的状态，则该方法禁止进行任何操作。
scale(x, y)
释义
scale(x, y)方法必须向变换矩阵中添加由参数所描述的缩放变换。参数x表示水平方向上的缩放比例，参数y表示垂直方向上的缩放比例。该比例为倍数。
rotate(angle)
释义
rotate(angle)方法必须向变换矩阵中添加有参数所描述的旋转变换。参数angle表示一个单位为弧度的顺时针方向的旋转角度。
translate(x, y)
释义
translate(x, y)方法必须向变换矩阵中添加有参数所描述的平移变换。参数x表示水平方向上的平移距离，参数y表示垂直方向上的平移距离。参数的单位为坐标空间单元。
transform(a, b, c, d, e, f)
释义
transform(a, b, c, d, e, f)方法必须使用当前变换矩阵与下面所描述的矩阵的乘积替换当前变换矩阵：
a c e b d f 0 0 1
setTransform(a, b, c, d, e, f)
释义
setTransform(a, b, c, d, e, f)方法必须首先将当前变换矩阵重置为单位矩阵，然后使用相同的参数调用transform(a, b, c, d, e, f)方法。
globalAlpha
释义
globalAlpha属性给出了将在形状和图片被合成到canvas（画布）之前应用的alpha（透明度）值。该值必须在0.0（完全透明）到1.0（不透明）范围内。如果给该属性指定了查出范围的值，包括无穷大及非数值（NaN）值，该属性必须保持其之前的值。在上下文被创建时，globalAlpha属性必须被预置为1.0。
globalCompositeOperation
释义
只要形状和图片应用了globalAlpha和当前变换矩阵，globalCompositeOperation属性将设置这些形状和图片将如何被绘制在已有的位图上。其值必须被设为下面的列表中的值。在下面的描述中，“原图片”、“A”表示将要被渲染的形状或图片，“目标图片”、“B”表示位图的当前状态。
-
source-atop
- A在B顶部。（图片均不透明处显示原图片；目标图片不透明但原图片透明处显示目标图片；其他部分显示透明。） source-in
- A在B之中。（图片均不透明处显示原图片；其他部分显示透明。） source-out
- A在B之外。（原图片不透明目标图片透明处显示原图片；其他部分显示透明。） source-over（默认）
- A在B之上。（原图片不透明处显示原图片；其他部分显示目标图片。） destination-atop
- B在A顶部。（交换原图片与目标图片之后，与source-atop相同。） destination-in
- B在A之中。（交换原图片与目标图片之后，与source-in相同。） destination-out
- B在A之外。（交换原图片与目标图片之后，与source-out相同。） destination-over
- B在A之上。（交换原图片与目标图片之后，与source-over相同。） lighter
- A加B。（显示原图片与目标图片之和，颜色值到255(100%)为限度。） copy
- A(忽略B)。（显示原图片而不显示目标图片。） xor
- A异或B。（原图片与目标图片的异或。） vendorName-operationName
- 特定供应商扩展的操作列表应该使用此语法。
strokeStyle
释义
strokeStyle属性表示用于包围形状的线的颜色或样式。
fillStyle
释义
fillStyle属性表示用于形状内部的颜色或样式。
createLinearGradient(x0, y0, x1, y1)
释义
createLinearGradient(x0, y0, x1, y1)方法获取四个参数。它们表示起点(x0, y0)和终点(x1, y1)。如果createLinearGradient()方法的任意参数为无穷大或Nan，则该方法必须抛出一个NOT_SUPPORTED_ERR异常。否则，该方法必须返回一个线性的CanvasGradient，其初始化为指定的线。
createRadialGradient(x0, y0, r0, x1, y1, r1)
释义
createRadialGradient(x0, y0, r0, x1, y1, r1)方法获取六个参数。前三个参数表示起点圆，圆点(x0, y0)及半径r0；后三个参数表示终点圆，圆点(x1, y1)和半径r1。这些值的单位为坐标空间单元。如果任意参数为无穷大或NaN，则必须抛出一个NOT_SUPPORTED_ERR异常。如果r0或r1任一为负数，则必须抛出一个INDEX_SIZE_ERR异常。否则，该方法必须返回一个射线CanvasGradient，其初始化为两个指定的圆。
createPattern(image, repetition)
释义
createPattern(image, repetition)方法的第一个参数给出了用作图案（HTMLImageElement、HTMLCanvasElement或HTMLVideoElement对象）的图片。在调用createPattern()方法之后对该图片的修改不得影响该图案。第二个参数必须为下列字符串之一：“repeat”、“repeat-x”、“repeat-y”、“no-repeat”。如果标记了空字符串或者null，则必须假定为“repeat”。如果给出了一个不被认可的值，则用户代理必须抛出一个SYNTAX_ERR异常。用户代理必须精确的识别之前所描述的四个值（例如，它们不能折叠）。
lineWidth
释义
lineWidth属性给出了线的宽度，其单位为坐标空间单元。在获取时，其必须返回当前值。在设置时，零、负数、无穷大以及NaN必须被忽略，保持原值不变；对于其他值，将当前值改为新值。
在创建上下文时，lineCap属性必须被预置为“1.0”.
lineCap
释义
lineCap属性定义了用户代理将应用于线段端点的样式。三个有效值为“butt”、“round”和“square”。“butt”表示线段的端点为一个垂直于线段方向的平面（没有附加线帽）。“round”表示线段的端点为一个直径等于线段宽度的半圆。“square”表示线段的端点为一个长度等于线段宽度一半的矩形，且其放置的位置垂直于线段的方向。
在获取时，其必须返回当前值。在设置时，如果新值为字符串常量“butt”、“round”或“square”之一，则必须将当前值替换为新值；其他值必须忽略，保持当前值不变。
在创建上下文时，lineCap属性必须被预置为“butt”。
lineJoin
释义
lineJoin属性定义了用户代理将应用于两条线段连接处的转角样式。三个有效值为“bevel”、“round”和“miter”。
在获取时，其必须返回当前值。在设置时，如果新值为字符串常量“bevel”、“round”或“miter”之一，则必须将当前值替换为新值；其他值必须忽略，保持当前值不变。
在创建上下文时，lineCap属性必须被预置为“butt”。
连接点存在于任意被两个连线所共享的子路径上的点处。若子路径是闭合的，则连接点还存在于第一个点（等价于最后一个点）处，其在子路径中连接第一条和最后一条线。
除了连接点处的点，每个连接点还有两个与之相关的点，每条线上有一个：每条线段连接点处垂线上距离连接点半个线宽且远离另一条线段的点。
在两个相对的角之间用实线相连，其与连接点组成的实心三角型必须进行渲染。lineJoin属性控制控制在此之外的渲染。上述三个值的意义如下：
bevel表示渲染以及完成。
round表示需要渲染连接点的两个上述角之间通过弧度连接的区域，这部分区域邻近（不覆盖）上述三角形，直径等于线宽、圆点为连接点。
miter表示需要渲染第二个三角形区域（如果可以给出斜接长度），这部分区域的一条边在上述两个角之间，邻近第一个三角形，另两条边两条线段连接点处外部边缘的延长线，延长线的长度为在不超过斜接长度的情况下能够是两条延长线相交。
斜接长度为从连接点到两条外边缘延长线交点的距离。联接限制率为斜接长度到半线宽的比例所允许的最大值。如果斜接长度超过斜接限制率所指定的最大值，则禁止渲染第二个三角形。
miterLimit
释义
miterLimit属性指定联接限制率。在获取时，必须返回当前值。在设置时，零、负值、无穷大及NaN值必须被忽略，保持当前值不变；对于其他值，必须将当前值修改为新值。
在创建上下文时，miterLimit属性必须被预置为10.0。
shadowOffsetX、shadowOffsetY
释义
shadowOffsetX以及shadowOffsetY属性指定阴影在水平以及垂直方向上的偏移距离。它们的值的单位是坐标空间单元。当前变换矩阵不影响它们。
创建上下文时，阴影偏移属性必须被预置为0。
在获取时，它们必须返回其当前值。在设置时，如果新值为无穷大或NaN，则必须忽略新值，否则，被设置的属性必须被设为新值。
shadowBlur
释义
shadowBlur属性指定模糊效果等级。（其单位并非坐标空间单元，其不受当前变换矩阵影响。）
创建上下文时，shadowBlur属性必须被预置为0。
在获取时，该属性必须返回其当前值。在设置时，如果新值为无穷大或NaN，则必须忽略新值，否则，该属性必须被设为新值。
shadowColor
释义
shadowColor设置阴影的颜色。
创建上下文时，shadowColor属性必须被预置为完全透明的黑色。
在获取时，必须返回该颜色的序列化形式。
在设置时，新值必须按照CSS值解析并制定。如果该值不能按照CSS值进行解析，则其必须被忽略并且保持该属性之前的值。
clearRect(x, y, w, h)
释义
clearRect(x, y, w, h)方法必须清除参数所指定的矩形与当前剪裁区域相交部分的像素，将其设为完全透明的黑色，清除所有之前的图片。如果宽或高中存在零，则该方法不起作用。
fillRect(x, y, w, h)
释义
fillRect(x, y, w, h)方法必须使用fillStyle绘制指定的矩形区域。如果宽或高中存在零，则该方法不起作用。
strokeRect(x, y, w, h)
释义
strokeRect(x, y, w, h)方法必须使用strokeStyle、lineWidth、lineJoin以及（如果恰当）miterLimit属性绘制包围指定矩形的路径。如果宽和高均为零，则该方法不起作用，因为不存在包围的路径（其为一个点）。如果仅二者之一为零，则该方法将绘制一条线（轮廓的路径仅为沿非零坐标的一条直线）。
beginPath()
释义
beginPath()方法必须清空子路径列表，使得上下文再次拥有零子路径。
closePath()
释义
如果上下文没有子路径，则closePath()方法禁止进行操作。否则，该方法必须将最后一条子路径标记为闭合，创建一个新的子路径，使其第一个点与上一个子路径的第一个点相同，并最终将新的子路径加入的路径之中。
注意：如果最后一个子路径在其点的列表中拥有超过一个点，则其等价于添加一个从最后一个点到第一个点的直线，形成“闭合的”形状，之后重复最后一个（可能是隐含的）moveTo()调用。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
