Html5 之 Canvas

标签:

---

不支持提示

---

相关接口:

---

//
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:

---