遭遇例 ／ 確認例

確認例

▼html

<canvas id="canv" width="500px" height="500px"></canvas>



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

▼js

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



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;

ctx.arc(250, 250, 250, 15 * Math.PI / 180 , 270 * Math.PI / 180 , false);

ctx.fill();

・円弧にグラデーション

---