千呼萬喚 HTML 5 (8) - 畫布（canvas）之繪製圖形

[索引頁][源碼下載] 千呼萬喚 HTML 5 (8) - 畫布（canvas）之繪製圖形作者：webabcd 介紹HTML 5: 畫布（canvas）之繪製圖形畫布 Demo - 畫布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext ...

[索引頁]
[源碼下載]

作者：webabcd

介紹
HTML 5: 畫布（canvas）之繪製圖形

畫布 Demo - 畫布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
在畫布上繪製矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
在畫布上繪製弧線（以路徑的方式）- beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
在畫布上繪製曲線（以路徑的方式）- quadraticCurveTo(), bezierCurveTo()
在畫布上繪製直線（以路徑的方式）- lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
在畫布上繪製矩形（以路徑的方式）- rect()

示例
1、畫布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html

<!DOCTYPE HTML>
<html>
<head>
    <title>畫布 Demo</title>
</head>
<body>
    <canvas id="canvas" width="320" height="240" style="background-color: rgb(222, 222, 222)">
        您的瀏覽器不支持 canvas 標簽
    </canvas>
    <br/>
    <button type="button" onclick="demo();">Demo</button>

    <br />
    <img id="img" alt="" src="" />

    <script type="text/javascript">

        var canvas = document.getElementById('canvas')
        if (canvas.getContext) {
            alert("您的瀏覽器支持 canvas 標簽");
        } else {
            alert("您的瀏覽器不支持 canvas 標簽");
        }

        /*
         * canvas 標簽 - 畫布標簽
         *   getContext("2d") - 獲取畫布標簽上的 2D 上下文對象（CanvasRenderingContext2D 對象）
         *   width - 畫布的寬
         *   height - 畫布的高
         *   canvas.toDataURL(type) - 返回畫布數據，預設類型為 image/png
         *     type - 指定返回畫布數據的類型，比如可以指定為 image/jpeg，預設類型為 image/png
         *
         * CanvasRenderingContext2D - 畫布的 2D 上下文對象，其擁有多種繪製圖像的方法
         *   canvas - 上下文所對應的畫布
         */

        var ctx = canvas.getContext('2d');
        alert(ctx.canvas.id);

        function demo() {

            ctx.fillRect(20, 20, 100, 100);

            alert("width: " + canvas.width.toString());
            alert("height: " + canvas.height.toString());

            alert(canvas.toDataURL("image/jpeg"));
            alert(canvas.toDataURL()); // image/png
            document.getElementById("img").src = canvas.toDataURL();

        }

    </script>
</body>
</html>

2、繪製矩形 | canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
canvas/shape/rectangle.html

<!DOCTYPE HTML>
<html>
<head>
    <title>在 canvas 上繪製矩形的 demo</title>
</head>
<body>
    <canvas id="canvas" width="300" height="360" style="background-color: rgb(222, 222, 222)">
        您的瀏覽器不支持 canvas 標簽
    </canvas>
    <br/>
    <button type="button" onclick="drawIt();">在畫布上繪製一些矩形</button>
    <button type="button" onclick="clearIt();">清除畫布</button>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas')
        if (canvas.getContext) {
            alert("您的瀏覽器支持 canvas 標簽");
        } else {
            alert("您的瀏覽器不支持 canvas 標簽");
        }

        /*
         * canvas.getContext("2d") - 獲取畫布標簽上的 2D 上下文對象（HTML DOM CanvasRenderingContext2D 對象），其擁有多種繪製圖像的方法。
         */
        var ctx = canvas.getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.fillRect(x, y, w, h) - 繪製一個有填充色的矩形，預設填充色為 0x000000
             *   x - 矩形左上角的 x 坐標
             *   y - 矩形左上角的 y 坐標
             *   w - 矩形的寬
             *   h - 矩形的高
             */
            ctx.fillRect(0, 0, 100, 100);

            /*
             * context.fillStyle - 指定填充色的顏色值
             *
             * 顏色值示例如下：
             *   Color Name - "green"
             *   #rgb - "#0f0"
             *   #rrggbb = "#00ff00"
             *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)
             *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)
             *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)
             *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)
             */
            ctx.fillStyle = "#0f0";
            ctx.fillRect(120, 0, 100, 50);

            /*
             * context.lineWidth - 筆劃的寬度，預設值是 1.0。
             *    註意看本 Demo，筆劃的寬度為 10，可以明顯的看出其中心線為筆劃的路徑，畫布外的圖像不予顯示
             * context.strokeStyle - 指定筆劃的顏色值
             * context.strokeRect(x, y, w, h) - 繪製一個不填充的矩形
             *   x - 矩形左上角的 x 坐標
             *   y - 矩形左上角的 y 坐標
             *   w - 矩形的寬
             *   h - 矩形的高
             */
            ctx.lineWidth = 10;
            ctx.strokeStyle = "rgb(0, 0, 0)";
            ctx.strokeRect(0, 120, 100, 100);

            // 繪製一個填充色半透明的矩形
            ctx.fillStyle = "rgba(0, 255, 0, 0.3)";
            ctx.fillRect(0, 240, 100, 100);
        }

        function clearIt() {
            /*
             * context.clearRect(x, y, w, h) - 將指定的矩形區域上的圖像全部清除
             */
            ctx.clearRect(0, 0, 300, 360);

            ctx.fillStyle = "Black";
            ctx.strokeStyle = "Black";
            ctx.lineWidth = 1;
        }

    </script>
</body>
</html>

3、路徑方式繪製 - 弧線 | beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
canvas/shape/path/arc.html

<!DOCTYPE HTML>
<html>
<head>
    <title>以路徑的方式在 canvas 上繪製圓和弧的 demo</title>
</head>
<body>
    <img alt="" src="arcTo.png" />
    <br/>

    <canvas id="canvas" width="260" height="360" style="background-color: rgb(222, 222, 222)">
        您的瀏覽器不支持 canvas 標簽
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">在畫布上繪製一些圓和弧</button>
    <button type="button" onclick="clearIt();">清除畫布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.beginPath() - 準備繪製一條路徑
             *
             * context.arc(x, y, radius, startRadian, endRadian, anticlockwise) - 根據指定的參數繪製一條弧線
             *   x - 弧線的中心點的 x 坐標
             *   y - 弧線的中心點的 x 坐標
             *   radius - 弧線的半徑
             *   startRadian - 弧線起始點的弧度（以 X 軸正半軸的三點鐘方向為弧度 0）
             *   endRadian - 弧線結束點的弧度（以 X 軸正半軸的三點鐘方向為弧度 0）
             *   anticlockwise - 是否以逆時針方向繪製路徑
             *
             * context.fill() - 使用當前的顏色或漸變色等來填充當前路徑的內部
             *
             * context.stroke() - 繪製當前路徑
             *
             * context.isPointInPath(x, y) - 判斷指定的點是否在當前路徑內
             */
            
            // 繪製一個以黑色為填充色的圓形
            ctx.beginPath();
            ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);
            ctx.fill();
            alert(ctx.isPointInPath(50, 50));

            // 繪製一個以半透明藍色為填充色的圓形
            ctx.beginPath();
            ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
            ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);
            ctx.fill();

            ctx.lineWidth = 10;

            // 演示按順時針方向繪製弧線（以 X 軸正半軸的三點鐘方向為弧度 0）
            ctx.beginPath();
            ctx.strokeStyle = "rgb(0, 255, 0)";
            ctx.arc(50, 150, 50, 0, 1.5 * Math.PI, false);
            ctx.stroke();

            // 演示按逆時針方向繪製弧線（以 X 軸正半軸的三點鐘方向為弧度 0）
            ctx.beginPath();
            ctx.strokeStyle = "rgb(0, 255, 0)";
            ctx.arc(150, 150, 50, 0, 1.5 * Math.PI, true);
            ctx.stroke();

            /*
             * context.moveTo(x, y) - 新開一個路徑，並指定路徑的起點
             *
             * context.arcTo(x1, y1, x2, y2, radius) - 通過指定切點和半徑的方式繪製弧線。
             *   x1, y1 - 路徑當前點與 (x1, y1) 的連接線為弧線起點的切線。詳見圖片 arcTo.png
             *   x2, y2 - (x1, y1) 與 (x2, y2) 的連接線為弧線終點的切線，此切點即為弧線的終點。詳見圖片 arcTo.png
             *   radius - 弧線半徑
             */
            ctx.beginPath();
            ctx.strokeStyle = "rgb(0, 0, 255)";
            ctx.moveTo(50, 250);
            ctx.arcTo(150, 250, 150, 1000, 50);
            ctx.stroke();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 260, 360);

            ctx.fillStyle = "Black";
            ctx.strokeStyle = "Black";
            ctx.lineWidth = 1;
        }

    </script>
</body>
</html>

4、路徑方式繪製 - 曲線 | quadraticCurveTo(), bezierCurveTo()
canvas/shape/path/curve.html

<!DOCTYPE HTML>
<html>
<head>
    <title>以路徑的方式在 canvas 上繪製曲線的 demo</title>
</head>
<body>
    <img alt="" src="curve.png" />
    <br/>
    <img alt="" src="curve_quadratic.gif" />
    <br/>
    <img alt="" src="curve_bezier.gif" />
    <br/>

    <canvas id="canvas" width="260" height="300" style="background-color: rgb(222, 222, 222)">
        您的瀏覽器不支持 canvas 標簽
    </canvas>
    <br/>
    <button type="button" onclick="drawIt();">在畫布上繪製一些曲線</button>
    <button type="button" onclick="clearIt();">清除畫布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.quadraticCurveTo(cpX, cpY, x, y) - 以當前點為曲線起點，按指定的參數繪製二次方貝塞爾曲線。見圖 curve.png, curve_bezier.gif
             *   cpX - 控制點的 x 軸坐標
             *   cpY - 控制點的 y 軸坐標
             *   x - 曲線終點的 x 軸坐標
             *   y - 曲線終點的 y 軸坐標
             */
            ctx.beginPath();
            ctx.moveTo(20, 100);
            ctx.quadraticCurveTo(40, 20, 180, 100);
            ctx.stroke();

            /*
             * context.bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) - 以當前點為曲線起點，按指定的參數繪製三次方貝塞爾曲線。見圖 curve.png, curve_quadratic.gif
             *   cpX1 - 和曲線起點相關連的控制點的 x 軸坐標
             *   cpY1 - 和曲線起點相關連的控制點的 y 軸坐標
             *   cpX2 - 和曲線終點相關連的控制點的 x 軸坐標
             *   cpY2 - 和曲線終點相關連的控制點的 y 軸坐標
             *   x - 曲線終點的 x 軸坐標
             *   y - 曲線終點的 y 軸坐標
             */
            ctx.beginPath();
            ctx.moveTo(20, 200);
            ctx.bezierCurveTo(0, 160, 160, 120, 180, 200);
            ctx.stroke();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 260, 300);
        }
    </script>
</body>
</html>

5、路徑方式繪製 - 直線 | lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
canvas/shape/path/line.html

<!DOCTYPE HTML>
<html>
<head>
    <title>以路徑的方式在 canvas 上繪製直線的 demo</title>
</head>
<body>
    <canvas id="canvas" width="340" height="300" style="background-color: rgb(222, 222, 222)">
        您的瀏覽器不支持 canvas 標簽
    </canvas>
    <br/>
    <button type="button" onclick="drawIt();">在畫布上繪製一些直線</button>
    <button type="button" onclick="clearIt();">清除畫布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            ctx.strokeStyle = 'Green';

            /*
             * context.lineWidth - 筆劃的寬度，預設值是 1.0
             */
            ctx.lineWidth = 10;
            
            /*
            * context.beginPath() - 準備繪製一條路徑
            * context.stroke() - 繪製當前路徑
            * context.moveTo(x, y) - 新開一個路徑，並指定路徑的起點
            * context.lineTo(x, y) - 將當前點與指定的點用一條筆直的路徑連接起來
            */
            ctx.beginPath();
            ctx.moveTo(20, 20);
            ctx.lineTo(200, 20);
            ctx.stroke();

            /*
             * context.lineCap - 指定線條末端的繪製方式
             *   round - 線條末端有一個半圓形線帽
             *   square - 線條末端有一個矩形線帽
             *   butt - 線條末端無任何特殊處理，此值為預設值
             */
            ctx.beginPath();
            ctx.lineCap = "round";
            ctx.moveTo(20, 40);
            ctx.lineTo(200, 40);
            ctx.stroke();

            ctx.beginPath();
            ctx.lineCap = "square";
            ctx.moveTo(20, 60);
            ctx.lineTo(200, 60);
            ctx.stroke();

            ctx.beginPath();
            ctx.lineCap = "butt";
            ctx.moveTo(20, 80);
            ctx.lineTo(