配置<canvas> 與矩形描繪

描繪矩形必須預先透過 rect() 定義其座標位置還有長寬,所需的語法如下:

context.rect(x, y, w, h);

前兩個參數代表所要描繪的矩形左上角的座標位置, w 則是矩形的寬度, h 則是矩形的高度,此定義所對應的矩形如下:


完成定義之後,接下來再調用 stroke() 方法,即可將矩形畫出,來看以下的程式與網頁內容配置:

<!DOCTYPE html >
<html >
<head>
    <title></title>
    <script>
        window.onload = function () {
            var c = document.getElementById('pcanvas');
            var context = c.getContext('2d');

            context.rect(60, 60, 400, 200);
            context.stroke();
        } 
    </script>
</head>
<body>
<canvas id="pcanvas"
style="background:silver;" width="720" height="320"  ></canvas>
</body>
</html>

最後得到以下的網頁結果:

沒有留言: