塗り色の設定

fillStyle / createLinearGradient / createRadialGradient / addColorStop

解説

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

fillStyle: 塗り色を指定します。; rgb()で指定すれば、赤青緑を3つの10進数（それぞれ0～255）で指定することができます。; rgba()で指定すれば、赤青緑を3つの10進数と不透明度（0～1）で指定することができます。
例えば不透明度には0.5を指定すれば半透明になります。; スタイルシートのような色で指定すれば、赤青緑を色名や16進数で指定することができます。
createLinearGradient: 線形のグラデーションで塗ることができます。; グラデーションを開始するX座標、Y座標と、終了するX座標、Y座標を指定します。; どのような色を使ってグラデーションするのかは、その後addColorStopを使って指定します。
createRadialGradient: 円形のグラデーションで塗ることができます。; グラデーションを開始するX座標、Y座標、半径と、終了するX座標、Y座標、半径を指定します。; どのような色を使ってグラデーションするのかは、その後addColorStopを使って指定します。
addColorStop: グラデーションに使う色を設定します。; 開始位置から終了位置までの範囲を0～1として、小数を指定します。

ソースコード

<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">

function sbFillStyle() {
    elmCv = document.getElementById('cv');
    ctxCv = elmCv.getContext('2d');
    
    //Text 1
    ctxCv.fillRect(50,30,300,40);
    
    //Text 2
    ctxCv.fillStyle = 'rgba(255,0,0,0.5)';
    ctxCv.fillRect(50,90,300,40);
    
    //Text 3
    ctxCv.fillStyle = 'rgb(0,255,0)';
    ctxCv.fillRect(50,150,300,40);
    
    //Text 4
    ctxCv.fillStyle = '#0000ff';
    ctxCv.fillRect(50,210,300,40);
    
    //Text 5
    lgTemp = ctxCv.createLinearGradient(0,0,20,20);
    lgTemp.addColorStop(0.3,'#00ff00');
    lgTemp.addColorStop(0.7,'#0000ff');
    ctxCv.fillStyle = lgTemp;
    ctxCv.fillRect(50,270,300,40);
    
    //Text 6
    rgTemp = ctxCv.createRadialGradient(10,10,10,60,20,30);
    rgTemp.addColorStop(0.3,'#00ff00');
    rgTemp.addColorStop(0.7,'#0000ff');
    ctxCv.fillStyle = rgTemp;
    ctxCv.fillRect(50,330,300,40);
}
window.onload = sbFillStyle;

</script>
</head>
<body>
<canvas id="cv" width="400" height="400"></canvas>
</body>
</html>

塗り色の設定

タグ一覧

塗り色の設定

解説

ソースコード

サンプル