適当CGプログラミング » Canvas辞典 »

四角形の描画

四角形の描画

getContext / rect / stroke / fill / strokeRect / fillRect

解説

rectを使用すれば四角形を描くことが出来ます。
四角形を描いた後に、strokeやをfill使えば線を表示したり塗りつぶしたりすることができます。

ただ、描いた四角形の線をすぐに表示したければstrokeRectを、すぐに塗りつぶしたければfillRectを使うのが便利です。

rect
パスとして四角形を描きます。
stroke
描いたパスの線を表示します。
fill
描いたパスを塗りつぶします。
strokeRect
四角形を描き、線を表示します。
fillRect
四角形を描き、塗りつぶします。

ソースコード

<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function sbRect() {
    elmCv = document.getElementById('cv');
    ctxCv = elmCv.getContext('2d');
    
    //stroke
    ctxCv.rect(50,30,300,40);
    ctxCv.stroke();
    
    //fill
    ctxCv.rect(50,90,300,40);
    ctxCv.fill();
    
    //strokeRect
    ctxCv.strokeRect(50,150,300,40);
    
    //fillRect
    ctxCv.fillRect(50,210,300,40);
}
window.onload = sbRect;
</script>
</head>
<body>
<canvas id="cv" width="400" height="400"></canvas>
</body>
</html>

サンプル

Copyright © 1999-2006 Hikijishi All Rights Reserved.
[] [cgp][0.00248003005981445]