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

線の色の設定

線の色の設定

strokeStyle

解説

strokeStyleを使用すればデフォルトの線の色を設定することが出来ます。

strokeStyle
線の色を指定します。
rgb()で指定すれば、赤青緑を3つの10進数(それぞれ0〜255)で指定することができます。
rgba()で指定すれば、赤青緑を3つの10進数と不透明度(0〜1)で指定することができます。
例えば不透明度には0.5を指定すれば半透明になります。
スタイルシートのような色で指定すれば、赤青緑を色名や16進数で指定することができます。

ソースコード

<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function sbStrokeStyle() {
    elmCv = document.getElementById('cv');
    ctxCv = elmCv.getContext('2d');
    
    //Text 1
    ctxCv.strokeRect(50,30,300,40);
    
    //Text 2
    ctxCv.strokeStyle = 'rgba(255,0,0,1)';
    ctxCv.strokeRect(50,90,300,40);
    
    //Text 3
    ctxCv.strokeStyle = 'rgba(255,0,0,0.5)';
    ctxCv.strokeRect(50,150,300,40);
    
    //Text 4
    ctxCv.strokeStyle = 'rgb(0,255,0)';
    ctxCv.strokeRect(50,210,300,40);
    
    //Text 5
    ctxCv.strokeStyle = '#0000ff';
    ctxCv.strokeRect(50,270,300,40);
}
window.onload = sbStrokeStyle;
</script>
</head>
<body>
<canvas id="cv" width="400" height="400"></canvas>
</body>
</html>

サンプル

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