遭遇例 ／ 確認例

遭遇例

▼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>

グラデーション色を追加