HTML5 Canvas (1) - 入門

HTML 5 canvas

HTML5 Canvas 入門。

1. Canvas 標籤

HTML5新增了一個畫布(Canvas)標籤，可以在上面畫圖或呈現動畫，當然也可以用來製作遊戲。Canvas只是提供一個可供繪圖的區域，繪圖的實際作業必須使用Javascript來執行。

使用的流程：在HTML中加入canvas標籤，使用Javascript取得該canvas，接著就可以使用HTML5 Canvas API來進行繪圖。

使用Canvas的基本HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Canvas Example</title>
        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                //可以開始畫圖了:)
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="300"></canvas>
    </body>
</html>

我們加入了一個<canvas>的標籤，指定一個id，做為給Javascript取用的唯一名稱，並且指定寬為500px，高為400px。在Javascript中以canvas的id來取得它，接著從這個canvas中取得它的context，這裡是指定為2d。到目前為止我們什麼都沒做，所以執行時畫面一片空白。

讓我們先來把畫布的範圍顯示出來，這裡使用CSS。請加在<head></head>之間。

<style>
body {
  margin: 10px;
  padding: 0px;
}
#myCanvas {
  border: 1px solid #666666;
}
</style>

這樣你就可以清楚的看到畫布的範圍了。

2. 開始畫圖

接下來我們來畫個方形。請加入以下程式碼到Javascript標籤中。

//可以開始畫圖了:)
context.moveTo(50, 50);
context.lineTo(150, 50);
context.lineTo(150, 150);
context.lineTo(50, 150);
context.lineTo(50, 50);
context.stroke();

moveTo(x, y)是把畫筆移動到某個座標，lineTo(x, y)則是從原來的座標畫到這個座標，stroke()則是把前面的指令畫出來。

覺得黑黑的不好看嗎？幫畫筆換個顏色，你可以使用

context.strokeStyle = 'red';

或

context.strokeStyle = '#ff0000';

顏色的格式和HTML的一樣，有基本的顏色名稱，也可直接指定。

接下來讓線變粗一點吧~~

context.lineWidth = 10;

記得這些設定畫筆格式的命令都必須寫在context.stroke();之前。

你會發現左上角有個缺角，為什麼呢？這是線段樣式的關係，線段樣式有3種：

butt：只畫到線頭。這是預設樣式。
round：圓頭。線段的起頭或結尾不會是平的，以半圓呈現。
square：方塊。看起來會和butt樣式一樣，但會依線的粗細在點之外在加上一定的厚度，所以會比原點還超過線粗的距離。

設定線段的樣式：

context.lineCap = "square";

文字描述比較抽象，直接看結果吧。原本的方形線段設為square後就不會有缺角了，另外我直接用3種線段格式畫了3條線，直接比較應該比較容易理解。

小提醒：當你要畫很多線段時，記得在該線段開始前加上

context.beginPath();

這樣在beginPath()之前的線段設定就不會影響到接下來的不同線段。

目前為止的全部程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Canvas Example</title>
        <style>
            body {
                margin: 10px;
                padding: 0px;
            }
            #myCanvas {
                border: 1px solid #666666;
            }
        </style>
        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                //可以開始畫圖了:)
                context.beginPath();
                context.moveTo(50, 50);
                context.lineTo(150, 50);
                context.lineTo(150, 150);
                context.lineTo(50, 150);
                context.lineTo(50, 50);
                context.strokeStyle = '#ff0000';
                context.lineWidth = 10;
                context.lineCap = "square";
                context.stroke();

                //lineCap: butt, round, square
                context.beginPath();
                context.moveTo(200,50);
                context.lineTo(300,50);
                context.strokeStyle = 'blue';
                context.lineWidth = 20;
                context.lineCap = "butt";
                context.stroke();

                context.beginPath();
                context.moveTo(200,100);
                context.lineTo(300,100);
                context.strokeStyle = 'green';
                context.lineWidth = 20;
                context.lineCap = "round";
                context.stroke();

                context.beginPath();
                context.moveTo(200,150);
                context.lineTo(300,150);
                context.strokeStyle = 'red';
                context.lineWidth = 20;
                context.lineCap = "square";
                context.stroke();                
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="300"></canvas>
    </body>
</html>

接下來你還可以試試：

曲線：

context.arc(centerX, centerY, radius, startingAngle,
 endingAngle, antiClockwise);

二次曲線：

context.quadraticCurveTo(controlX, controlY, endX, endY);

貝茲曲線：

context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

本文網址：https://blog.tonycube.com/2012/02/html5-canvas-1-canvas.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀

HTML5 Canvas (1) - 入門

1. Canvas 標籤

2. 開始畫圖

我要留言