<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Html5遊戲開發學習1-Canvas</title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="broder:black 1px solid;">
    瀏覽器不支援HTML5 canvas
</canvas>
<script type="text/javascript" charset="utf-8">
    //獲取canvas物件的引用
    var canvas = document.getElementById('canvas');
    //獲取canvas的2d繪圖環境
    var context = canvas.getContext('2d');
    //繪製具有顏色和透明度的矩形
    context.fillStyle = "red";
    //畫一個紅色的矩形
    context.fillRect(310,160,100,50);
    //設定邊線顏色為綠色
    context.strokeStyle = "green";
    //畫一個綠色的空心矩形
    context.strokeRect(310,240,100,50);
    //使用rgb設定填充顏色為紅色
    context.fillStyle = "rgb(255,0,0)";
    //畫一個紅色的實心矩形
    context.fillRect(420,160,100,50);
    //設定填充顏色為綠色,並且alpha值為0.6
    context.fillStyle="rgba(0,255,0,0.6)";
    //畫一個半透明的綠色實心矩形
    context.fillRect(450,180,100,50);
</script>
</body>
</html>

執行效果: