相关接口:
//interface CanvasRenderingContext2D { 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; // (default 1.0) attribute DOMString globalCompositeOperation; // (default source-over) attribute any strokeStyle; // (default black) attribute any fillStyle; // (default black) 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; // (default 1) attribute DOMString lineCap; // "butt", "round", "square" (default "butt") attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter") attribute double miterLimit; // (default 10) attribute double shadowOffsetX; // (default 0) attribute double shadowOffsetY; // (default 0) attribute double shadowBlur; // (default 0) attribute DOMString shadowColor; // (default 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); 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 double xCaret, in double yCaret, in optional boolean canDrawCustom); 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") 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 { // opaque object};//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);}; 微软官方示例:
Rectangles: [双击代码可查看运行效果 - 用谷歌浏览器]
Arcs:
Quadratic:
Bezier:
Clipping:
fillStyle:
strokeStyle:
Gradients:
Patterns:
lineWidth:
lineCap:
lineJoin:
Shadows:
Text:
Image:
Video:
Rotate:
Scale:
setTransform:
Stroke transform:
Animation:
Mouse:
火狐官方示例
moveTo example:
lineTo example:
arc example:
quadraticCurveTo example:
globalAlpha example:
linearGradient example:
createRadialGradient example:
createPattern example:
shadowed text example:
save and restore canvas state example:
translate example:
rotate example:
scale example:
setTransform examples:
clip example:
谷歌的例子
arc:
clearpath:
gradient:
gradient2:
linewidth:
overflow:
quadraticcurve:
resizing:
saverestorepath:
stroke-scale-rotate:
stroke-should-not-close-path:
example1: