createLinearGradient() メソッド

CanvasRenderingContext2D ＞ createLinearGradient()メソッド

概要

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

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

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

構文


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 オブジェクト」を返す

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

　閲覧数:435　投稿日: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()メソッドで、現在のパスを塗りつぶす

遭遇例 ／ 確認例

　閲覧数:358　投稿日: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();


・円弧にグラデーション


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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 createLinearGradient() メソッド 63
2 getAttribLocation()メソッド 56
3 translate() メソッド 56
4 rect()メソッド 54
5 createShader()メソッド 53
6 clear()メソッド 53
7 clearRect()メソッド 52
8 beginPath()メソッド 52
9 compileShader()メソッド 52
10 drawImage() メソッド 51
11 clearDepth()メソッド 51
12 bindBuffer()メソッド 51
13 strokeRect() メソッド 50
14 stroke() メソッド 50
15 arc()メソッド 50
16 setTransform()メソッド 49
17 createBuffer()メソッド 49
18 shaderSource()メソッド 49
19 fillRect()メソッド 49
20 createProgram()メソッド 48
2024/9/08 16:17 更新
週間人気ページランキング ／ 9-1 → 9-7
順位 ページタイトル抜粋 アクセス数
1 フォーム | その他 8
2 save()メソッド | CanvasRenderingContext2D 3
3 シェーダー | compileShader()メソッド(WebGLRenderingContext) 2
3 beginPath()メソッド | CanvasRenderingContext2D 2
4 createBuffer()メソッド(WebGLRenderingContext) カテゴリー 1
4 アフィン変換 | transform()メソッド(CanvasRenderingContext2D ) 1
4 HTML5用語 1
4 fill()メソッド(CanvasRenderingContext2D ) カテゴリー 1
4 Web Storage | その他 1
4 createBuffer()メソッド | WebGLRenderingContext 1
4 compileShader()メソッド | WebGLRenderingContext 1
4 localStorage | localStorageプロパティ(HTMLStorageオブジェクト) 1
4 WebGLShader 1
4 getAttribLocation()メソッド(WebGLRenderingContext) カテゴリー 1
4 HTMLエンティティ | HTML 1
4 fill()メソッド | CanvasRenderingContext2D 1
2024/9/8 1:01 更新