Html5 之 Canvas

标签:

---

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">不支持提示</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: [双击代码可查看运行效果 - 用谷歌浏览器]

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.fillRect(50, 20, 145, 145);

    ctx.fillStyle = "rgb(0, 162, 232)";
    ctx.fillRect(135, 85, 125, 125);

    ctx.lineWidth = 5;

    ctx.strokeStyle = "rgb(0, 0, 0)";
    ctx.strokeRect(50, 335, 145, 145);

    ctx.strokeStyle = "rgb(0, 162, 232)";
    ctx.strokeRect(135, 275, 125, 125);

    ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
    ctx.fillRect(210, 180, 125, 125);
</script>
</body>
</html>

---

Arcs:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.fillStyle = "rgb(0 ,0 ,0)";
    ctx.arc(123, 93, 80, 0, 2 * Math.PI, true);
    ctx.fill();

    ctx.beginPath();
    ctx.fillStyle = "rgb(0, 162, 232)";
    ctx.arc(198, 158, 70, 0, 2 * Math.PI, true);
    ctx.fill();

    ctx.lineWidth = 5;

    ctx.beginPath();
    ctx.strokeStyle = "rgb(0, 0, 0)";
    ctx.arc(123, 408, 80, 0, 1.5 * Math.PI, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = "rgb(0, 162, 232)";
    ctx.arc(198, 328, 70, 0, 0.5 * Math.PI, true);
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
    ctx.arc(273, 243, 70, 0, 2 * Math.PI, true);
    ctx.fill();
</script>
</body>
</html>

---

Quadratic:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(194, 104);
    ctx.quadraticCurveTo(54, 104, 54, 246);
    ctx.quadraticCurveTo(54, 371, 194, 371);
    ctx.quadraticCurveTo(324, 371, 338, 272);
    ctx.lineTo(240, 272);
    ctx.arc(197, 272, 47, 0, Math.PI, false);
    ctx.lineTo(150, 256);
    ctx.lineTo(338, 256);
    ctx.quadraticCurveTo(338, 104, 194, 104);
    ctx.moveTo(154, 207);
    ctx.fillStyle = "rgb(9, 126, 196)";
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.lineTo(240, 211);
    ctx.arc(197, 211, 47, 0, Math.PI, true);
    ctx.fill();
    ctx.closePath();
</script>
</body>
</html>

---

Bezier:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.lineWidth = 20;
    ctx.beginPath();
    ctx.moveTo(230, 130);
    ctx.bezierCurveTo(230, 130, 230, 130, 230, 210);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(170, 130);
    ctx.bezierCurveTo(170, 130, 170, 130, 170, 210);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(100, 230);
    ctx.bezierCurveTo(100, 230, 200, 380, 300, 230);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(219, 298);
    ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);
    ctx.stroke();
</script>
</body>
</html>

---

Clipping:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var index = 0;
    timer1 = setInterval(renderLoop, 16);

    function renderLoop() {
        if (index > 600) index = 0;
        index += 4;
        draw(index);
    }

    function draw(x) {
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, 400, 500);

        ctx.save();
        ctx.beginPath();
        ctx.arc(x, x, 200, 0, Math.PI * 2, true);
        ctx.clip();

        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, 400, 500);

        drawSmiley();
        ctx.restore();
    }

    function drawSmiley() {
        ctx.lineWidth = 20;
        ctx.beginPath();
        ctx.moveTo(230, 130);
        ctx.bezierCurveTo(230, 130, 230, 130, 230, 210);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(170, 130);
        ctx.bezierCurveTo(170, 130, 170, 130, 170, 210);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(100, 230);
        ctx.bezierCurveTo(100, 230, 200, 380, 300, 230);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(219, 298);
        ctx.bezierCurveTo(278, 351, 315, 315, 277, 258);
        ctx.stroke();
    }                   
</script>
</body>
</html>

---

fillStyle:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var a = 1;

    for (j = 0; j < 100; j++) {
        var r = 255, g = 0, b = 0;

        for (i = 0; i < 150; i++) {
            if (i < 25) g += 10.2;
            else if (i >= 25 && i < 50) r -= 10.2;
            else if (i >= 50 && i < 75) {
                g -= 10.2;
                b += 10.2;
            }
            else if (i >= 75 && i < 100) r += 10.2;
            else b -= 10.2;
            ctx.fillStyle = "rgba(" + Math.floor(r) + "," +
                      Math.floor(g) + "," +
                      Math.floor(b) + "," + a + ")";
            ctx.fillRect(3 * i, 5 * j, 3, 5);
        }
        a -= 0.01;
    }
</script>
</body>
</html>

---

strokeStyle:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var a = 1;

    for (j = 0; j < 100; j++) {
        var r = 255, g = 0, b = 0;
        for (i = 0; i < 150; i++) {
            if (i < 25) g += 10.2;
            else if (i >= 25 && i < 50) r -= 10.2;
            else if (i >= 50 && i < 75) {
                g -= 10.2;
                b += 10.2;
            }
            else if (i >= 75 && i < 100) r += 10.2;
            else b -= 10.2;
            ctx.strokeStyle = "rgba(" + Math.floor(r) + "," +
                        Math.floor(g) + "," +
                        Math.floor(b) + "," + a + ")";
            ctx.strokeRect(3 * i, 5 * j, 3, 5);
        }
        a -= 0.01;
    }
</script>
</body>
</html>

---

Gradients:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var gradient1 = ctx.createLinearGradient(0, 0, 0, 500);
    gradient1.addColorStop(0, "#00ABEB");
    gradient1.addColorStop(1, "white");

    var gradient2 = ctx.createLinearGradient(0, 25, 0, 450);
    gradient2.addColorStop(0, "red");
    gradient2.addColorStop(0.4, "white");
    gradient2.addColorStop(1, "red");

    var gradient3 = ctx.createRadialGradient(0, 0, 50, 0, 0, 100);
    gradient3.addColorStop(0, "#F4F201");
    gradient3.addColorStop(0.8, "#E4C700");
    gradient3.addColorStop(1, "rgba(228,199,0,0)");

    var gradient4 = ctx.createRadialGradient(250, 1, 1, 250, 1, 225);
    gradient4.addColorStop(0, "white");
    gradient4.addColorStop(1, "gray");

    ctx.fillStyle = gradient1;
    ctx.fillRect(0, 0, 400, 500);

    ctx.fillStyle = gradient3;
    ctx.fillRect(0, 0, 100, 100);

    ctx.fillStyle = gradient4;
    ctx.beginPath();
    ctx.arc(310, 50, 25, 9, Math.PI, true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(340, 50, 30, 9, Math.PI, true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(370, 50, 25, 9, Math.PI, true);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(200, 25);
    ctx.lineTo(50, 200);
    ctx.lineTo(200, 450);
    ctx.lineTo(350, 200);
    ctx.lineTo(200, 25);
    ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fill();

    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(200, 25);
    ctx.lineTo(200, 200);
    ctx.lineTo(350, 200);
    ctx.fillStyle = gradient2;
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(50, 200);
    ctx.lineTo(200, 200);
    ctx.lineTo(200, 450);
    ctx.fillStyle = gradient2;
    ctx.fill();
    ctx.stroke();

    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(200, 450);
    ctx.bezierCurveTo(75, 460, 155, 350, 36, 290);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(8, 290);
    ctx.lineTo(62, 290);
    ctx.lineTo(58, 270);
    ctx.lineTo(12, 310);
    ctx.lineTo(8, 290);
    ctx.fillStyle = gradient2;
    ctx.fill();
    ctx.stroke();

    ctx.lineWidth = 5;
    ctx.lineCap = "round";
    ctx.beginPath();
    ctx.moveTo(200, 25);
    ctx.lineTo(50, 200);
    ctx.lineTo(200, 450);
    ctx.lineTo(350, 200);
    ctx.lineTo(200, 25);
    ctx.stroke();
</script>
</body>
</html>

---

Patterns:

---

<!doctype html>
<html>
<body>
<img id="ie_small" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie_small.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var image = document.getElementById("ie_small");
    var pattern = ctx.createPattern(image, "repeat");
    ctx.fillStyle = pattern;

    drawClearCenteredE();

    function drawClearCenteredE() {
        ctx.beginPath();
        ctx.moveTo(194, 104);
        ctx.quadraticCurveTo(54, 104, 54, 246);
        ctx.quadraticCurveTo(54, 371, 194, 371);
        ctx.quadraticCurveTo(324, 371, 338, 272);
        ctx.lineTo(240, 272);
        ctx.arc(197, 272, 47, 0, Math.PI, false);
        ctx.lineTo(150, 256);
        ctx.lineTo(338, 256);
        ctx.quadraticCurveTo(338, 104, 194, 104);
        ctx.moveTo(154, 207);
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = 'rgb(255, 255, 255)';
        ctx.lineTo(240, 211);
        ctx.arc(197, 211, 47, 0, Math.PI, true);
        ctx.fill();
        ctx.closePath();
    }
</script>
</body>
</html>

---

lineWidth:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    for (i = 20; i > 0; i--) {
        ctx.strokeStyle = "black";
        ctx.lineWidth = i;
        ctx.beginPath();
        ctx.moveTo(55, 20 + (20 - i) * 24);
        ctx.lineTo(335, 20 + (20 - i) * 24);
        ctx.stroke();
    }
</script>
</body>
</html>

---

lineCap:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.textBaseline = "top";
    ctx.textAlign = "left";
    ctx.font = '24px "Segoe UI"';

    var styles = ["round", "square", "butt"];

    for (i = 0; i < styles.length; i++) {
        ctx.fillStyle = "rgb(0, 89, 187)";
        ctx.fillText(styles[i], 10, 75 + i * 125);

        ctx.strokeStyle = "black";
        ctx.lineWidth = 50;
        ctx.lineCap = styles[i];
        ctx.beginPath();
        ctx.moveTo(125, 125 + i * 125);
        ctx.lineTo(350, 125 + i * 125);
        ctx.stroke();

        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(60, 125 + i * 125);
        ctx.lineTo(390, 125 + i * 125);
        ctx.stroke();
    }

    ctx.beginPath();
    ctx.moveTo(125, 75);
    ctx.lineTo(125, 425);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(350, 75);
    ctx.lineTo(350, 425);
    ctx.stroke();
</script>
</body>
</html>

---

lineJoin:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.textBaseline = "top";
    ctx.textAlign = "left";
    ctx.font = '24px "Segoe UI"';

    var styles = ["bevel", "round", "miter"];
    for (i = 0; i < styles.length; i++) {
        ctx.fillStyle = "rgb(0, 89, 187)";
        ctx.fillText(styles[i], 40, 50 + i * 150);

        ctx.lineJoin = styles[i];
        ctx.lineWidth = 75;
        ctx.strokeStyle = "black";

        ctx.beginPath();
        ctx.moveTo(155, 90 + i * 150);
        ctx.lineTo(225, 90 + i * 150);
        ctx.lineTo(225, 150 + i * 150);
        ctx.stroke();

        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(100, 90 + i * 150);
        ctx.lineTo(300, 90 + i * 150);
        ctx.stroke();
    }

    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;

    ctx.beginPath();
    ctx.moveTo(155, 30);
    ctx.lineTo(155, 470);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(225, 30);
    ctx.lineTo(225, 470);
    ctx.stroke();
</script>
</body>
</html>

---

Shadows:

---

<!doctype html>
<html>
<body>
<img id="ie" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 10;
    ctx.shadowColor = "rgba(0, 0, 0, 1)";

    ctx.fillStyle = "black";
    ctx.font = "72px Segoe UI";
    ctx.fillText("Canvas", 90, 60);

    var image = document.getElementById("ie");
    ctx.drawImage(image, 70, 70, 250, 250);

    var gradient = ctx.createLinearGradient(0, 0, 250, 0);
    gradient.addColorStop(0, "#0080FF");
    gradient.addColorStop(1, "#FFFFFF");

    ctx.fillStyle = gradient;
    ctx.fillRect(25, 330, 340, 20);

    ctx.beginPath();
    ctx.fillStyle = "rgba(30, 144, 255, 0.25)";
    ctx.arc(50, 420, 30, 0, 2 * Math.PI, true);
    ctx.fill();

    ctx.beginPath();
    ctx.fillStyle = "rgba(30, 144, 255, 0.5)";
    ctx.arc(150, 420, 30, 0, 2 * Math.PI, true);
    ctx.fill();

    ctx.beginPath();
    ctx.fillStyle = "rgba(30, 144, 255, 0.75)";
    ctx.arc(250, 420, 30, 0, 2 * Math.PI, true);
    ctx.fill();

    ctx.beginPath();
    ctx.fillStyle = "rgba(30, 144, 255, 1)";
    ctx.arc(350, 420, 30, 0, 2 * Math.PI, true);
    ctx.fill();
</script>
</body>
</html>

---

Text:

---

<!doctype html>
<html>
<body>
<img id="ie_small" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie_small.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.textBaseline = "top";
    ctx.textAlign = "left";

    ctx.fillText("IE9 supports HTML5 Canvas", 0, 0);

    ctx.font = '24px "Segoe UI"';
    ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
    ctx.fillText("IE9 supports HTML5 Canvas", 0, 30);

    ctx.save();
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 5;
    ctx.shadowColor = "rgba(0, 0, 0, 1)";
    ctx.font = '72px "Segoe UI" bold';
    ctx.strokeText("IE9 supports HTML5 Canvas", 0, 70);

    var gradient = ctx.createLinearGradient(0, 160, 0, 300);
    gradient.addColorStop(0, "#0080FF");
    gradient.addColorStop(1, "#FFFFFF");
    ctx.fillStyle = gradient;
    ctx.font = '127px "Segoe UI" bold';
    ctx.fillText("IE9 supports HTML5 Canvas", 0, 160);
    ctx.strokeText("IE9 supports HTML5 Canvas", 0, 160);
    ctx.restore();

    var image = document.getElementById("ie_small");
    var pattern = ctx.createPattern(image, "repeat");
    ctx.fillStyle = pattern;
    ctx.font = '254px "Segoe UI" bold';
    ctx.fillText("IE9 supports HTML5 Canvas", 0, 275);
    ctx.strokeText("IE9 supports HTML5 Canvas", 0, 275);
</script>
</body>
</html>

---

Image:

---

<!doctype html>
<html>
<body>
<img id="ie" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie.png" style="display: none" />
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var image = document.getElementById("ie");
    ctx.drawImage(image, -10, 45, 400, 400);
</script>
</body>
</html>

---

Video:

---

<!doctype html>
<html>
<body>
<video id="video" src="http://ie.microsoft.com/testdrive/Graphics/CanvasPad/fish.mp4" width="640" height="360" loop style="display: none"></video>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    timer1 = setInterval(drawVideo, 16);

    function drawVideo() {
        if (!isNaN(video.duration)) {
            video.play();
            ctx.drawImage(video, 0, 0, 400, 500);
        }
    } 
</script>
</body>
</html>

---

Rotate:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.translate(200, 250);

    for (i = 0; i < 10; i++) {
        ctx.rotate(0.2 * Math.PI);

        ctx.fillStyle = "rgba(0, 128, 255, 0.5)";
        ctx.fillRect(10, 0, 150, 50);
    }
</script>
</body>
</html>

---

Scale:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
    ctx.arc(80, 80, 70, 0, 2 * Math.PI, true);
    ctx.fill();
    ctx.stroke();

    ctx.translate(75, 100);
    ctx.scale(2, 2);

    ctx.beginPath();
    ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
    ctx.arc(80, 80, 70, 0, 2 * Math.PI, true);
    ctx.fill();
    ctx.stroke();
</script>
</body>
</html>

---

setTransform:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.translate(200, 250);

    var x = 6;
    var sine = Math.sin(1 / (x - 1) * Math.PI);
    var cose = Math.cos(1 / x * Math.PI);

    for (i = 0; i <= 2 * x; i++) {
        var color = 255 / (2 * x) * i;
        ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ", 0.9)";
        drawClearE();
        ctx.transform(cose, sine, -sine, cose, 0, 0);
    }

    function drawClearE() {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(70, 0);
        ctx.quadraticCurveTo(0, 0, 0, 71);
        ctx.quadraticCurveTo(0, 133.5, 70, 133.5);
        ctx.quadraticCurveTo(135, 133.5, 142, 84);
        ctx.lineTo(93, 84);
        ctx.arc(71.5, 84, 21.5, 0, Math.PI, false);
        ctx.lineTo(50, 76);
        ctx.lineTo(142, 76);
        ctx.quadraticCurveTo(142, 0, 70, 0);
        ctx.moveTo(50, 53.5);
        ctx.fill();
        ctx.closePath();
        ctx.strokeStyle = "black";
        ctx.stroke();

        ctx.beginPath();
        ctx.fillStyle = "white";
        ctx.lineTo(93, 53.5);
        ctx.arc(71.5, 53.5, 21.5, 0, Math.PI, true);
        ctx.fill();
        ctx.closePath();
        ctx.strokeStyle = "black";
        ctx.stroke();
        ctx.restore();
    }
</script>
</body>
</html>

---

Stroke transform:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.lineWidth = 10;

    ctx.beginPath();
    ctx.arc(145, 225, 50, 0, Math.PI, true);
    ctx.moveTo(95, 225);
    ctx.lineTo(195, 330);

    ctx.setTransform(1, 4, 0, 1, 0, 0);
    ctx.stroke();

    ctx.setTransform(1, 0, 0, 1, 0, 0);

    ctx.beginPath();
    ctx.arc(245, 225, 50, 0, Math.PI, true);
    ctx.moveTo(295, 225);
    ctx.lineTo(195, 330);

    ctx.setTransform(1, -4, 0, 1, 0, 0);
    ctx.stroke();
</script>
</body>
</html>

---

Animation:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var WIDTH = cvs.width;
    var HEIGHT = cvs.height;

    var lastX = WIDTH * Math.random();
    var lastY = HEIGHT * Math.random();
    function line() {
        ctx.save();
        ctx.translate(WIDTH / 2, HEIGHT / 2);
        ctx.scale(0.9, 0.9);
        ctx.translate(-WIDTH / 2, -HEIGHT / 2);
        ctx.beginPath();
        ctx.lineWidth = 5 + Math.random() * 10;
        ctx.moveTo(lastX, lastY);
        lastX = WIDTH * Math.random();
        lastY = HEIGHT * Math.random();
        ctx.bezierCurveTo(WIDTH * Math.random(),
                         HEIGHT * Math.random(),
                         WIDTH * Math.random(),
                         HEIGHT * Math.random(),
                         lastX, lastY);

        var r = Math.floor(Math.random() * 255) + 70;
        var g = Math.floor(Math.random() * 255) + 70;
        var b = Math.floor(Math.random() * 255) + 70;

        var s = 'rgba(' + r + ',' + g + ',' + b + ', 1.0)';
        ctx.shadowColor = 'white';
        ctx.shadowBlur = 10;
        ctx.strokeStyle = s;
        ctx.stroke();
        ctx.restore();
    }
    timer1 = setInterval(line, 50);

    function blank() {
        ctx.fillStyle = 'rgba(0,0,0,0.1)';
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
    }
    timer2 = setInterval(blank, 40);
</script>
</body>
</html>

---

Mouse:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var WIDTH = cvs.width;
    var HEIGHT = cvs.height;

    var currentX = 0, currentY = 0;
    function OnMouseMove(e) {

        if (typeof e == 'undefined') e = canvas1.event;
        if (typeof e.offsetX != 'undefined' && typeof e.offsetY != 'undefined') {
            currentX = e.offsetX;
            currentY = e.offsetY;
        }
        else {
            var relPos = getRelativePos(e.clientX, e.clientY);
            currentX = relPos[0];
            currentY = relPos[1];
        }
    }
    if (cvs.addEventListener) cvs.addEventListener("mousemove", OnMouseMove, false);
    else if (cvs.attachEvent) cvs.attachEvent("onmousemove", OnMouseMove);

    //
    var lastX = 0, lastY = 0, count = 0;
    var r = Math.floor(Math.random() * 255) + 70;
    var g = Math.floor(Math.random() * 255) + 70;
    var b = Math.floor(Math.random() * 255) + 70;

    timer1 = setInterval(drawLoop, 16);

    function drawLines(x, y) {
        ctx.lineWidth = 40;
        ctx.lineCap = "round";
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + ", 1)";
        ctx.stroke();
    }

    function drawLoop() {
        ctx.fillStyle = "rgba(0,0,0,0.05)";
        ctx.fillRect(0, 0, WIDTH, HEIGHT);

        drawLines(currentX, currentY);

        if (count++ > 50) {
            count = 0;
            r = Math.floor(Math.random() * 255) + 70;
            g = Math.floor(Math.random() * 255) + 70;
            b = Math.floor(Math.random() * 255) + 70;
        }
        lastX = currentX;
        lastY = currentY;
    }
</script>
</body>
</html>

---

火狐官方示例

---

moveTo example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
    ctx.stroke();
</script>
</body>
</html>

---

lineTo example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(105, 25);
    ctx.lineTo(25, 105);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    ctx.closePath();
    ctx.stroke();
</script>
</body>
</html>

---

arc example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    for (i = 0; i < 4; i++) {
        for (j = 0; j < 3; j++) {
            ctx.beginPath();
            var x = 25 + j * 50;
            var y = 25 + i * 50;
            var radius = 20;
            var startAngle = 0;
            var endAngle = Math.PI + (Math.PI * j) / 2;
            var clockwise = i % 2 == 0 ? false : true;

            ctx.arc(x, y, radius, startAngle, endAngle, clockwise);

            if (i > 1) {
                ctx.fill();
            } else {
                ctx.stroke();
            }
        }
    }
</script>
</body>
</html>

---

quadraticCurveTo example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
</script>
</body>
</html>

---

globalAlpha example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.fillStyle = '#FD0';
    ctx.fillRect(0,0,75,75);
    ctx.fillStyle = '#6C0';
    ctx.fillRect(75,0,75,75);
    ctx.fillStyle = '#09F)';
    ctx.fillRect(0,75,75,75);
    ctx.fillStyle = '#F30';
    ctx.fillRect(75,75,150,150);
    ctx.fillStyle = '#FFF';

    ctx.globalAlpha = 0.2;

    for (i=0;i<7;i++){
        ctx.beginPath();
        ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
        ctx.fill();
    }
</script>
</body>
</html>

---

linearGradient example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
    lingrad.addColorStop(0, '#00ABEB');
    lingrad.addColorStop(0.5, '#fff');
    lingrad.addColorStop(0.5, '#66CC00');
    lingrad.addColorStop(1, '#fff');

    var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
    lingrad2.addColorStop(0.5, '#000');
    lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

    ctx.fillStyle = lingrad;
    ctx.strokeStyle = lingrad2;

    ctx.fillRect(10, 10, 130, 130);
    ctx.strokeRect(50, 50, 50, 50);
</script>
</body>
</html>

---

createRadialGradient example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
    radgrad.addColorStop(0, '#A7D30C');
    radgrad.addColorStop(0.9, '#019F62');
    radgrad.addColorStop(1, 'rgba(1,159,98,0)');

    var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
    radgrad2.addColorStop(0, '#FF5F98');
    radgrad2.addColorStop(0.75, '#FF0188');
    radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

    var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
    radgrad3.addColorStop(0, '#00C9FF');
    radgrad3.addColorStop(0.8, '#00B5E2');
    radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

    var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
    radgrad4.addColorStop(0, '#F4F201');
    radgrad4.addColorStop(0.8, '#E4C700');
    radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

    ctx.fillStyle = radgrad4;
    ctx.fillRect(0, 0, 150, 150);
    ctx.fillStyle = radgrad3;
    ctx.fillRect(0, 0, 150, 150);
    ctx.fillStyle = radgrad2;
    ctx.fillRect(0, 0, 150, 150);
    ctx.fillStyle = radgrad;
    ctx.fillRect(0, 0, 150, 150);
</script>
</body>
</html>

---

createPattern example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var img = new Image();
    img.src = 'http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie_small.png';
    img.onload = function () {
        var ptrn = ctx.createPattern(img, 'repeat');
        ctx.fillStyle = ptrn;
        ctx.fillRect(0, 0, 150, 150);
    }
</script>
</body>
</html>

---

shadowed text example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

    ctx.font = "20px Times New Roman";
    ctx.fillStyle = "Black";
    ctx.fillText("Sample String", 5, 30);
</script>
</body>
</html>

---

save and restore canvas state example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.fillRect(0, 0, 150, 150);   
    ctx.save();                     

    ctx.fillStyle = '#09F'          
    ctx.fillRect(15, 15, 120, 120); 

    ctx.save();                     
    ctx.fillStyle = '#FFF'          
    ctx.globalAlpha = 0.5;
    ctx.fillRect(30, 30, 90, 90);   

    ctx.restore();                  
    ctx.fillRect(45, 45, 60, 60);   

    ctx.restore();                  
    ctx.fillRect(60, 60, 30, 30);   
</script>
</body>
</html>

---

translate example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.fillRect(0, 0, 300, 300);
    for (i = 0; i < 3; i++) {
        for (j = 0; j < 3; j++) {
            ctx.save();
            ctx.strokeStyle = "#9CFF00";
            ctx.translate(50 + j * 100, 50 + i * 100);
            drawSpirograph(ctx, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
            ctx.restore();
        }
    }

    function drawSpirograph(ctx, R, r, O) {
        var x1 = R - O;
        var y1 = 0;
        var i = 1;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        do {
            if (i > 20000) break;
            var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
            var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
            ctx.lineTo(x2, y2);
            x1 = x2;
            y1 = y2;
            i++;
        } while (x2 != R - O && y2 != 0);
        ctx.stroke();
    }
</script>
</body>
</html>

---

rotate example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.translate(75, 75);
    for (i = 1; i < 6; i++) {
        ctx.save();
        ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';
        for (j = 0; j < i * 6; j++) {
            ctx.rotate(Math.PI * 2 / (i * 6));
            ctx.beginPath();
            ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
            ctx.fill();
        }
        ctx.restore();
    }
</script>
</body>
</html>

---

scale example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.strokeStyle = "#fc0";
    ctx.lineWidth = 1.5;
    ctx.fillRect(0, 0, 300, 300);

    ctx.save()
    ctx.translate(50, 50);
    drawSpirograph(ctx, 22, 6, 5);

    ctx.translate(100, 0);
    ctx.scale(0.75, 0.75);
    drawSpirograph(ctx, 22, 6, 5);

    ctx.translate(133.333, 0);
    ctx.scale(0.75, 0.75);
    drawSpirograph(ctx, 22, 6, 5);
    ctx.restore();

    ctx.strokeStyle = "#0cf";
    ctx.save()
    ctx.translate(50, 150);
    ctx.scale(1, 0.75);
    drawSpirograph(ctx, 22, 6, 5);

    ctx.translate(100, 0);
    ctx.scale(1, 0.75);
    drawSpirograph(ctx, 22, 6, 5);

    ctx.translate(100, 0);
    ctx.scale(1, 0.75);
    drawSpirograph(ctx, 22, 6, 5);
    ctx.restore();

    ctx.strokeStyle = "#cf0";
    ctx.save()
    ctx.translate(50, 250);
    ctx.scale(0.75, 1);
    drawSpirograph(ctx, 22, 6, 5);

    ctx.translate(133.333, 0);
    ctx.scale(0.75, 1);
    drawSpirograph(ctx, 22, 6, 5);

    ctx.translate(177.777, 0);
    ctx.scale(0.75, 1);
    drawSpirograph(ctx, 22, 6, 5);
    ctx.restore();

    function drawSpirograph(ctx, R, r, O) {
        var x1 = R - O;
        var y1 = 0;
        var i = 1;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        do {
            if (i > 20000) break;
            var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
            var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
            ctx.lineTo(x2, y2);
            x1 = x2;
            y1 = y2;
            i++;
        } while (x2 != R - O && y2 != 0);
        ctx.stroke();
    }
</script>
</body>
</html>

---

setTransform examples:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var sin = Math.sin(Math.PI / 6);
    var cos = Math.cos(Math.PI / 6);
    ctx.translate(200, 200);
    var c = 0;
    for (var i = 0; i <= 12; i++) {
        c = Math.floor(255 / 12 * i);
        ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
        ctx.fillRect(0, 0, 100, 10);
        ctx.transform(cos, sin, -sin, cos, 0, 0);
    }

    ctx.setTransform(-1, 0, 0, 1, 200, 200);
    ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
    ctx.fillRect(0, 50, 100, 100);
</script>
</body>
</html>

---

clip example:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.fillRect(0, 0, 150, 150);
    ctx.translate(75, 75);

    ctx.beginPath();
    ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
    ctx.clip();

    var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
    lingrad.addColorStop(0, '#232256');
    lingrad.addColorStop(1, '#143778');

    ctx.fillStyle = lingrad;
    ctx.fillRect(-75, -75, 150, 150);

    for (var j = 1; j < 50; j++) {
        ctx.save();
        ctx.fillStyle = '#fff';
        ctx.translate(75 - Math.floor(Math.random() * 150),
                  75 - Math.floor(Math.random() * 150));
        drawStar(ctx, Math.floor(Math.random() * 4) + 2);
        ctx.restore();
    }

    function drawStar(ctx, r) {
        ctx.save();
        ctx.beginPath()
        ctx.moveTo(r, 0);
        for (var i = 0; i < 9; i++) {
            ctx.rotate(Math.PI / 5);
            if (i % 2 == 0) {
                ctx.lineTo((r / 0.525731) * 0.200811, 0);
            } else {
                ctx.lineTo(r, 0);
            }
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
</script>
</body>
</html>

---

谷歌的例子

---

arc:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.arc(25, 25, 20, 0, Math.PI, false);
    ctx.stroke();

    ctx.save();
    ctx.scale(0.5, 0.5);
    ctx.beginPath();
    ctx.arc(75, 25, 20, 0, Math.PI * 2, false);
    ctx.stroke();
    ctx.restore();

    ctx.beginPath();
    ctx.arc(25, 75, 20, 0, Math.PI, true);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(75, 75, 20, 0, Math.PI * 2, true);
    ctx.stroke();
</script>
</body>
</html>

---

clearpath:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(0, 50);
    ctx.lineTo(50, 100);

    ctx.strokeRect(100.5, 125.5, 49, 49);

    ctx.lineTo(100, 50);

    ctx.fillRect(50, 125, 50, 50);

    ctx.lineTo(50, 0);

    ctx.clearRect(50, 125, 100, 50);

    ctx.lineTo(0, 50);
    ctx.stroke();
</script>
</body>
</html>

---

gradient:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var g = ctx.createLinearGradient(0, 0, 300, 0);
    g.addColorStop(0, '#000');
    g.addColorStop(1 / 7, '#00f');
    g.addColorStop(2 / 7, '#0f0');
    g.addColorStop(3 / 7, '#0ff');
    g.addColorStop(4 / 7, '#f00');
    g.addColorStop(5 / 7, '#f0f');
    g.addColorStop(6 / 7, '#ff0');
    g.addColorStop(1, '#fff');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>

---

gradient2:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var g1 = ctx.createLinearGradient(0, 0, 300, 200);
    g1.addColorStop(0.0, 'rgba(0, 255, 0, 0.0)');
    g1.addColorStop(1.0, 'rgba(0, 255, 0, 1.0)');

    var g2 = ctx.createLinearGradient(0, 0, 300, 200);
    g2.addColorStop(0.0, 'rgba(0, 255, 0, 1.0)');

    g2.addColorStop(1.0, 'rgba(0, 0, 0, 0.0)');
    ctx.fillStyle = g1;
    ctx.fillRect(0, 0, 300, 100);
    ctx.fillStyle = g2;
    ctx.fillRect(0, 100, 300, 100);
</script>
</body>
</html>

---

line

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1;
    for (var i = 0; i < 100; i++) {
        ctx.beginPath();
        ctx.moveTo(49 + i / 100, i);
        ctx.lineTo(49 + i / 100, i + 1);
        ctx.closePath();
        ctx.stroke();
    }

    for (var i = 0; i < 100; i++) {
        ctx.beginPath();
        ctx.moveTo(i, 49 + i / 100);
        ctx.lineTo(i + 1, 49 + i / 100);
        ctx.closePath();
        ctx.stroke();
    }
</script>
</body>
</html>

---

overflow:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.fillStyle = 'blue';
    ctx.fillRect(-50, -50, 100, 100);

    ctx.fillStyle = 'green';
    ctx.fillRect(50, 50, 100, 100);

    ctx.strokeStyle = 'black';
    ctx.strokeRect(0, 0, 100, 100);
</script>
</body>
</html>

---

quadraticcurve:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.save();

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.quadraticCurveTo(0, 0, 25, 75);
    ctx.quadraticCurveTo(50, 0, 50, 50);
    ctx.stroke();

    ctx.restore();

    ctx.save();

    ctx.translate(-56, -24);
    ctx.scale(3.5, 1.5);
    ctx.strokeStyle = '#ddd';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.quadraticCurveTo(0, 0, 25, 75);
    ctx.quadraticCurveTo(50, 0, 50, 50);
    ctx.stroke();

    ctx.restore();
</script>
</body>
</html>

---

resizing:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3; background-color:#eee;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    var size = 80;
    var img = new Image();
    img.src = "http://ie.microsoft.com/testdrive/Graphics/CanvasPad/images/ie.png";

    f();

    function f() {
        size = (size + 1) % 800;
        cvs.width = Number(size + 200);
        cvs.height = Number((size + 200) / 2);

        ctx.save();
        ctx.translate(50, 50);
        ctx.scale(0.1, 0.1);
        ctx.rotate(size / 800 * Math.PI * 8);
        ctx.drawImage(img, 0, -75);
        ctx.restore();

        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(cvs.width, cvs.height);
        ctx.moveTo(20, 20);
        ctx.lineTo(80, 20);
        ctx.lineTo(80, 80);
        ctx.lineTo(20, 80);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        ctx.save();
        ctx.beginPath();
        ctx.scale(size / 200, size / 200);
        ctx.arc(100, 50, 20, 0, Math.PI, true);
        ctx.fill();
        ctx.restore();

        setTimeout(f, 50);
    }
</script>
</body>
</html>

---

saverestorepath:

---

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(0, 50);
    ctx.lineTo(50, 100);

    ctx.save();
    ctx.lineTo(100, 50);
    ctx.restore();

    ctx.save();
    ctx.lineTo(50, 0);
    ctx.restore();

    ctx.save();
    ctx.lineTo(0, 50);
    ctx.restore();

    ctx.stroke();
</script>
</body>
</html>

---

stroke-scale-rotate:

---

<!doctype html>
<html>
<body >
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3; background:#eee"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.save();

    ctx.translate(100.5, 100);
    ctx.lineWidth = 1;

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(50, 0);
    ctx.scale(1, 2);
    ctx.rotate(Math.PI / 2);
    ctx.lineTo(25, -50)
    ctx.rotate(Math.PI / 2);
    ctx.lineTo(0, -25)
    ctx.scale(1, 2);
    ctx.closePath();
    ctx.stroke();

    ctx.restore();

    ctx.translate(50, 50);

    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'blue';
    drawStar(ctx, 20);


    function drawStar(ctx, r) {
        ctx.save();

        ctx.beginPath();
        ctx.rotate(-Math.PI / 10);
        ctx.scale(r, r);
        ctx.moveTo(1, 0);
        ctx.lineWidth = ctx.lineWidth / r;

        for (var i = 0; i < 9; i++) {
            ctx.rotate(Math.PI / 5);
            if (i % 2 == 0) {
                ctx.lineTo(0.3819653016466596, 0);
            } else {
                ctx.lineTo(1, 0);
            }
        }
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        ctx.restore();
    }
</script>
</body>
</html>

---

stroke-should-not-close-path:

---

<!doctype html>
<html>
<body >
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3; background:#eee"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("myCanvas");
    var ctx = cvs.getContext("2d");

    ctx.fillStyle = "#ccc";
    ctx.strokeStyle = "#000";

    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(150, 150);
    ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
    ctx.fill();
    ctx.stroke();
</script>
</body>
</html>

---

example1:

---

<!doctype html>
<html>
<head>
    <script type="text/javascript">
        var cvs, ctx;
        var particles = [];
        var NUM_PARTICLES = 20;

        function Particle() {
            this.x = Math.random() * cvs.width;
            this.y = Math.random() * cvs.height;

            this.xvel = Math.random() * 5 - 2.5;
            this.yvel = Math.random() * 5 - 2.5;
        }

        Particle.prototype.update = function () {
            this.x += this.xvel;
            this.y += this.yvel;

            this.yvel += 0.1;

            if (this.x > cvs.width || this.x < 0) {
                this.xvel = -this.xvel;
            }

            if (this.y > cvs.height || this.y < 0) {
                this.yvel = -this.yvel;
            }
        }

        function loop() {
            ctx.clearRect(0, 0, cvs.width, cvs.height);

            for (var i = 0; i < NUM_PARTICLES; i++) {
                particles[i].update();

                ctx.beginPath();
                ctx.moveTo(particles[i].x, particles[i].y);
                ctx.lineTo(particles[i].x - particles[i].xvel, particles[i].y - particles[i].yvel);
                ctx.stroke();
                ctx.closePath();
            }

            setTimeout(loop, 10);
        }

        function load() {
            cvs = document.getElementById("myCanvas");
            ctx = cvs.getContext("2d");

            for (var i = 0; i < NUM_PARTICLES; i++) {
                particles[i] = new Particle();
            }

            ctx.lineWidth = "2";
            ctx.strokeStyle = "rgb(255, 255, 255)";
            loop();
        }
    </script>
</head>
<body onload="load();" style="background-color:black; text-align:center;">
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #444;"></canvas>
</body>
</html>

---