addColorStop()メソッド

CanvasGradient ＞ addColorStop()メソッド

addColorStopとは？

　状態:- 　閲覧数:1,351 　投稿日:2015-12-03 　更新日:2015-12-16 　
グラデーション色を追加する際に使用するメソッド
addColorStop(offset, color);


第1引数 offset
・グラデーション色のオフセット値を、0.0～1.0範囲の数値で指定
※オフセット値 … グラデーションの開始位置からどのくらいの離れているかを表した値のこと
・グラデーションの開始位置は0.0、終了位置は1.0
・指定できるのは0.0～1.0の範囲の数値
・オフセット値に範囲外の数値や数値以外の値を指定するとエラー（INDEX_SIZE_ERR）

第2引数 color
・色を指定
・色の値はCSSによる色指定と同じ
・色として解析できない無効な値を指定するとエラー（SYNTAX_ERR）となる







・createLinearGradient() メソッド

遭遇例 ／ 確認例

　閲覧数:384　投稿日:2015-12-11　更新日:2015-12-25　

遭遇例


▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>



<script>var ctx = document.getElementById("canv").getContext('2d');</script>


▼render.js
    var RECT_CANV = {

        x: 0,

        y: 0,

        w: 500,

        h: 500

    };

    var COLOR_PANEL_4 = "#006400 ";

    var COLOR_PANEL_5 = "#03a803 ";

    var COLOR_PANEL_6 = "#04cb04";

        //盤にグラデーションをつける。

        var grad = ctx.createLinearGradient(0, 0, RECT_CANV.w, RECT_CANV.h);

        grad.addColorStop(0, COLOR_PANEL_6);

        grad.addColorStop(0.3, COLOR_PANEL_5);

        grad.addColorStop(1, COLOR_PANEL_4);

        ctx.fillStyle = grad


確認例


グラデーション色を追加
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>

<script>

var RECT_CANV = {

    x: 0,

    y: 0,

    w: 500,

    h: 500

};



var COLOR_PANEL_4 = "#006400 ";

var COLOR_PANEL_5 = "#03a803 ";

var COLOR_PANEL_6 = "#04cb04";



var ctx = document.getElementById("canv").getContext('2d');



ctx.clearRect(0, 0, RECT_CANV.w, RECT_CANV.h);



//盤にグラデーションをつける。

var grad = ctx.createLinearGradient(0, 0, RECT_CANV.w, RECT_CANV.h);

grad.addColorStop(0, COLOR_PANEL_6);

grad.addColorStop(0.3, COLOR_PANEL_5);

grad.addColorStop(1, COLOR_PANEL_4);

ctx.fillStyle = grad



ctx.fillRect(0, 0, RECT_CANV.w, RECT_CANV.h);

</script>


グラデーション色指定変更
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>

<script>

var RECT_CANV = {

    x: 0,

    y: 0,

    w: 500,

    h: 500

};



var COLOR_PANEL_4 = "red";

var COLOR_PANEL_5 = "yellow";

var COLOR_PANEL_6 = "blue";



var ctx = document.getElementById("canv").getContext('2d');



ctx.clearRect(0, 0, RECT_CANV.w, RECT_CANV.h);



//盤にグラデーションをつける。

var grad = ctx.createLinearGradient(0, 0, RECT_CANV.w, RECT_CANV.h);

grad.addColorStop(0, COLOR_PANEL_6);

grad.addColorStop(0.3, COLOR_PANEL_5);

grad.addColorStop(1, COLOR_PANEL_4);

ctx.fillStyle = grad



ctx.fillRect(0, 0, RECT_CANV.w, RECT_CANV.h);

</script>


指定セルサイズにグラデーション色を追加
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>

<script>

var COL = 8;

var RECT_CANV = {

    x: 0,

    y: 0,

    w: 500,

    h: 500

};



var CELL_SIZE = RECT_CANV.w / COL | 0;



var COLOR_PANEL_4 = "#006400 ";

var COLOR_PANEL_5 = "#03a803 ";

var COLOR_PANEL_6 = "#04cb04";



var ctx = document.getElementById("canv").getContext('2d');



ctx.clearRect(0, 0, RECT_CANV.w, RECT_CANV.h);



//盤にグラデーションをつける。

var grad = ctx.createLinearGradient(0, 0, RECT_CANV.w, RECT_CANV.h);

grad.addColorStop(0, COLOR_PANEL_6);

grad.addColorStop(0.3, COLOR_PANEL_5);

grad.addColorStop(1, COLOR_PANEL_4);

ctx.fillStyle = grad



ctx.fillRect(0, 0, CELL_SIZE, CELL_SIZE);

</script>


縦横8回ループで描画
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>

<script>



var COL = 8;

var RECT_CANV = {

    x: 0,

    y: 0,

    w: 500,

    h: 500

};



var CELL_SIZE = RECT_CANV.w / COL | 0;



var COLOR_PANEL_4 = "#006400 ";

var COLOR_PANEL_5 = "#03a803 ";

var COLOR_PANEL_6 = "#04cb04";



var ctx = document.getElementById("canv").getContext('2d');



ctx.clearRect(0, 0, RECT_CANV.w, RECT_CANV.h);



//盤にグラデーションをつける。

var grad = ctx.createLinearGradient(0, 0, RECT_CANV.w, RECT_CANV.h);

grad.addColorStop(0, COLOR_PANEL_6);

grad.addColorStop(0.3, COLOR_PANEL_5);

grad.addColorStop(1, COLOR_PANEL_4);

ctx.fillStyle = grad



//盤に線を引く。

for (var x = 0; x < COL; x++) {

    for (var y = 0; y < COL; y++) {

        ctx.beginPath();

        ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);

    }

}

</script>


縦横8回ループで線も引く
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>

<script>

var COL = 8;

var RECT_CANV = {

    x: 0,

    y: 0,

    w: 500,

    h: 500

};



var CELL_SIZE = RECT_CANV.w / COL | 0;

var COLOR_LINE = "#FFFFFF";



var COLOR_PANEL_4 = "#006400 ";

var COLOR_PANEL_5 = "#03a803 ";

var COLOR_PANEL_6 = "#04cb04";



var ctx = document.getElementById("canv").getContext('2d');



ctx.clearRect(0, 0, RECT_CANV.w, RECT_CANV.h);



//盤にグラデーションをつける。

var grad = ctx.createLinearGradient(0, 0, RECT_CANV.w, RECT_CANV.h);

grad.addColorStop(0, COLOR_PANEL_6);

grad.addColorStop(0.3, COLOR_PANEL_5);

grad.addColorStop(1, COLOR_PANEL_4);

ctx.fillStyle = grad



//盤に線を引く。

for (var x = 0; x < COL; x++) {

    for (var y = 0; y < COL; y++) {

        ctx.strokeStyle = COLOR_LINE;

        ctx.beginPath();

        ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);

        ctx.strokeRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);

    }

}

</script>



グラデーション色を追加

コメント投稿(ログインが必要)



類似度ページランキング
順位 ページタイトル抜粋 ％
1 addColorStop()メソッド 83
2 compileShader()メソッド 70
3 clearColor()メソッド 65
4 clearDepth()メソッド 65
5 clear()メソッド 62
6 createShader()メソッド 61
7 shaderSource()メソッド 61
8 clearRect()メソッド 61
9 transform()メソッド 61
10 arc()メソッド 59
11 translate() メソッド 59
12 stroke() メソッド 58
13 rect()メソッド 57
14 setTransform()メソッド 56
15 scale()メソッド 55
16 createProgram()メソッド 54
17 lineTo()メソッド 53
18 drawImage() メソッド 53
19 bufferData()メソッド 53
20 drawArrays()メソッド 53
2025/2/05 13:04 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 clearRect()メソッド | CanvasRenderingContext2D 2
1 moveTo()メソッド(CanvasRenderingContext2D ) カテゴリー 2
1 fillStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 2
2 globalCompositeOperationプロパティ | CanvasRenderingContext2D 1
2 Web Storage | その他 1
2 strokeStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 1
2 WebGLShader 1
2 setItem()メソッド | HTMLStorageオブジェクト 1
2 createShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド | WebGLRenderingContext 1
2 drawArrays()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 遭遇例 ／ 確認例 1
2 shaderSource()メソッド | WebGLRenderingContext 1
2 transform()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 fillText()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 ピクセル | 色 1
2 RGBA | 色 1
2 ImageDataオブジェクト | HTMLCanvasElement 1
2 strokeRect() メソッド | CanvasRenderingContext2D 1
2025/2/5 1:02 更新