Canvas 入門 (2): グラフィックのグラデーションと画像の形状の変換_html/css_WEB-ITnose

出典: http://www.ido321.com/986.html

1. グラフィック グラデーション (すべて Google の最新バージョンでテスト済み)

1. 線形グラデーションを描画します

1: // 获取canvas 的ID

2:     var canvas = document.getElementById('canvas');

3:     if (canvas == null)

4:     {

rree

5:         return false;

6:     }

7:     // 获取上下文

8:     var context = canvas.getContext('2d');

9:     // 获取渐变对象

10:     var g1 = context.createLinearGradient(0,0,0,300);

11:     // 添加渐变颜色

12:     g1.addColorStop(0,'rgb(255,255,0)');

13:     g1.addColorStop(1,'rgb(0,255,255)');

14:     context.fillStyle = g1;

15:     context.fillRect(0,0,400,300);

16:     var g2 = context.createLinearGradient(0,0,300,0);

17:     g2.addColorStop(0,'rgba(0,0,255,0.5)');

18:     g2.addColorStop(1,'rgba(255,0,0,0.5)');

19:     for(var i = 0; i<10;i++)

20:     {

createLinearGradient(x1,y1,x2,y2) : それぞれパラメータ 開始位置と終了位置を表す水平座標と垂直座標グラデーションの

addColorStop(offset,color): offset は、グラデーションの開始位置からの設定色のオフセットを表し、値の範囲は 0 から 1 までの浮動小数点値です。グラデーションの開始オフセットは 0、グラデーションの終了オフセットは 1 です。 color はグラデーションの色です。

効果:

2. 放射状のグラデーションを描画します

21:         context.beginPath();

22:         context.fillStyle=g2;

23:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

24:         context.closePath();

25:         context.fill();

26:     }

1: // 获取canvas 的ID

2:     var canvas = document.getElementById('canvas');

3:     if (canvas == null)

4:     {

5:         return false;

createRadialGradient( x1 ,y1,radius1,x2,y2,radius2):x1,y1,radius1 はそれぞれ、グラデーション開始円の中心の水平座標と垂直座標と半径です。 x2、y2、radius2 はそれぞれ、グラデーション終了円の中心の水平座標と垂直座標と半径です。

効果

2. グラフィック変換

1. 座標変換: 移動、拡大縮小、回転

6:     }

7:     // 获取上下文

8:     var context = canvas.getContext('2d');

9:     // 获取渐变对象

10:     var g1 = context.createRadialGradient(400,0,0,400,0,400);

11:     // 添加渐变颜色

12:     g1.addColorStop(0.1,'rgb(255,255,0)');

13:     g1.addColorStop(0.3,'rgb(255,0,255)');

14:     g1.addColorStop(1,'rgb(0,255,255)');

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE

translate(x,y): 原点を移動します。x,y は左と下に移動する単位を表します。デフォルトの単位はピクセルです

scale(x,y): スケール、x,y は水平および垂直ズームを表しますサイズ 。 1 未満の場合は縮小され、1 より大きい場合は拡大されます。

rotate(angle): 回転、angle は回転角度、単位はラジアンです。 0 より大きい場合は時計回り、それ以外の場合は反時計回りの回転を意味します。 17 : { // 原点は毎回 10 ピクセル下に移動します

15:     context.fillStyle = g1;

16:     context.fillRect(0,0,400,300);

17:     var g2 = context.createRadialGradient(250,250,0,250,250,300);

18:     g2.addColorStop(1,'rgba(0,0,255,0.5)');

19:     g2.addColorStop(0.7,'rgba(255,255,0,0.5)')

20:     g2.addColorStop(0.1,'rgba(255,0,0,0.5)');

transform(m11,m12,m21,m22,dx,dy): 新しい変換行列を使用して現在の変換行列を乗算するようにメソッドを変更します。 dx、dy は原点座標を左と下に移動する単位を表し、デフォルトはピクセルです。

変換行列の形式は次のとおりです

m11 m12 dx

m21 m22 dy

0 0 1 最終的な効果:

概要: すべての座標変換メソッドは、transform() で置き換えることができます。次のように:

1. 変換(x,y) <=> 変換(1,0,0,1,dx,dy) または変換(0,1,1,0,dx,dy) 4 つのパラメータは不正なグラフィックスを表します。 ズーム操作を実行します。

2.scale(x,y) <=>transform(x,0,0,y,0,0) または transform(0,y,x,0,0,0)、後の 2 つのパラメータは次のとおりです。翻訳は行われません。

3. 回転(角度) <=> 変換(Math.cos(角度*Math.PI/180),Math.sin(角度*Math.PI/180) PI/180),Math.cos(angle*Math.PI/180),0,0) または

transform(-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI /180),Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),0,0)

次の記事: Canvas 入門 (3): 画像テキストの処理と描画