HTML canvas 元素使用示範

建立 HTML 元素：

    
<canvas id="canvas" width="500" height="500"></canvas>
    

在 JavaScript 中取得元素並初始化畫布：

    
const canvas = document.getElementById('canvas');
// 指定繪圖方式為 2D 繪圖
const ctx = canvas.getContext('2d');
    

各式設定顏色的方式

這裡以設定線條顏色舉例，設定各種藍色的方式：

    
    ctx.strokeStyle = 'blue';
    ctx.strokeStyle = '#0000ff';
    ctx.strokeStyle = 'rgb(0, 0, 255)';
    ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
    ctx.strokeStyle = 'hsl(240, 100%, 50%)';
    ctx.strokeStyle = 'hsla(240, 100%, 50%, 0.5)';
    

繪制線段

    
    // 設定線條顏色
    ctx.strokeStyle = 'blue';

    // 設定線條寬度
    ctx.lineWidth = 5;

    // 開始繪製路徑
    ctx.beginPath();

    // 座標移動到 (10, 10)
    ctx.moveTo(10,10);

    // 繪製線段到 (110, 110)
    ctx.lineTo(110,110);
    
    ctx.stroke(); // 描繪、繪製
    

繪制圓形(圓弧線段)

    
    // 繪製圓形
    ctx.beginPath();
    
    // 繪制圓弧，圓心座標 (60, 60) ，半徑 50，起始角度 0，結束角度 2π
    ctx.arc(60, 60, 50, 0, Math.PI * 2);
    
    ctx.stroke(); // 描繪、繪製
    

繪制實心矩形

    
    // 設定填充顏色
    ctx.fillStyle = 'red';

    // 繪製實心矩形
    ctx.fillRect(10, 10, 100, 100);
    

繪制文字

    
    ctx.font = "30px Arial";
    ctx.fillStyle = "black";
    // 繪製文字，座標 (110, 110)
    ctx.fillText("Hello World", 110, 110);
    

參考資料：
mdn - <canvas>: The Graphics Canvas element
mdn - Canvas API