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

キャンバス座標の設定

キャンバス座標の設定

translate

解説

translateを使用すればキャンバス内における描画位置を設定することが出来ます。
例えば通常、座標0,0は左上端ですが、座標0,0と指定したときにキャンバス中央が指定されるように描画位置を変更することができます。

translate
キャンバスの各メソッドで座標0,0を指定しようとした場合の、実際の描画位置を指定します。

ソースコード

<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function sbTranslate() {
    elmCv = document.getElementById('cv');
    ctxCv = elmCv.getContext('2d');
    
    ctxCv.strokeRect(50,30,300,40);
    
    ctxCv.translate(0,60);
    ctxCv.strokeRect(50,30,300,40);
    
    ctxCv.translate(20,60);
    ctxCv.strokeRect(50,30,300,40);
}
window.onload = sbTranslate;
</script>
</head>
<body>
<canvas id="cv" width="400" height="400"></canvas>
</body>
</html>

サンプル

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