createLinearGradient() メソッド

CanvasRenderingContext2D createLinearGradient()メソッド

概要

 状態:-  閲覧数:913  投稿日:2015-10-21  更新日:2015-12-01  
線形グラデーションを指定する際に使用

線形グラデーションとは?
・開始地点の色から、終了地点の色へと、直線的に色を徐々に変化表示する効果

具体的には?
・4つの引数で2つの座標を指定
→ 4つの引数を指定することで、この2点間を結ぶ直線に沿った線形グラデーションを定義


構文


4 つの引数が必要
・ (x0, y0)はグラデーションの開始点、(x1, y1)はグラデーションの終了点を表す
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
x0
・グラデーション開始点のx座標

y0
・グラデーション開始点のy座標

x1
・グラデーション終了点のx座標

y1
・グラデーション終了点のy座標

・引数にひとつでも有限数値でないものがあれば、NOT_SUPPORTED_ERR 例外を投げる


戻り値
・CanvasGradient オブジェクト
・「引数座標から得られる直線」に沿って描く「線形グラデーションを表す CanvasGradient オブジェクト」を返す

「線形グラデーションで塗りつぶした四角形」を描画するためには?

 閲覧数:296 投稿日:2015-11-04 更新日:2015-12-12 

手順


1.beginPath()で、現在のパスをリセットする
2.createLinearGradient(x0, y0, x1, y1)で、線形グラデーションを指定する
3.addColorStop(offset, color)で、グラデーション色を必要なだけ追加する
4.fillStyle()メソッドで、上で指定したグラデーション内容を塗りつぶしスタイルに代入する
5.rect(x, y, w, h)メソッドで、四角形を作成する
6.fill()メソッドで、現在のパスを塗りつぶす

遭遇例 / 確認例

 閲覧数:262 投稿日:2015-12-02 更新日:2016-02-19 

確認例


▼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();


円弧にグラデーション




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