Canvas入門(2):グラフィックグラデーションとイメージ変換
22254 ワード
出典:http://www.ido321.com/986.html
一、グラフィックグラデーション(いずれも最新版Googleでテスト)
1.直線グラデーションの描画
createLinearGradient(x 1,y 1,x 2,y 2):パラメータは、グラデーションの開始位置と終了位置の横縦座標をそれぞれ表します.
addColorStop(offset,color):offsetは、設定された色のグラデーション開始位置からのずれ量を表し、取値範囲は0~1の浮動小数点値である.ランプ開始オフセット量は0、ランプ終了オフセット量は1である.colorはグラデーションの色です.
効果:
2、放射状グラデーションの描画
createRadialGradient(x 1,y 1,radius 1,x 2,y 2,radius 2):x 1,y 1,radius 1はそれぞれグラデーション開始円の円心横長座標と半径である.x 2,y 2,radius 2はそれぞれグラデーション終了円の円心横縦座標と半径である.
効果
二、図形変換
1、座標変換:パン、ズーム、回転
translate(x,y):原点を平行移動し、x,yは左と下にどれだけの単位を移動するかを示し、デフォルトの単位はピクセルです.
scale(x,y):スケール、x,yは水平方向と垂直方向のスケールサイズを表します.1より小さく縮小し、1より大きく拡大します.
rotate(angle):回転、angleは回転角度、単位は弧です.0より大きい場合は時計回りに回転し、反時計回りに回転します.
効果:
2、マトリックス変換
17:{//原点を10個ずつ下げるpx
transform(m 11,m 12,m 21,m 22,dx,dy):新しい変換マトリクスを用いて現在の変換マトリクスと乗算する方法を変更した.dx,dyは原点座標の左シフトと下シフトの単位を表し、デフォルトは画素である.
変換マトリクスのフォーマットは次のとおりです.
m11 m12 dx
m21 m22 dy
0 0 1
最終的な効果:
まとめ:座標変換の方法はtransform()で代用でき、ルールは以下の通りです.
1、translate(x,y)<=>transform(1,0,0,1,dx,dy)またはtransform(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、 rotate(angle) <=> transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),- Math.sin(angle*Math.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):画像処理と描画テキスト
一、グラフィックグラデーション(いずれも最新版Googleでテスト)
1.直線グラデーションの描画
1: // canvas ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 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: { 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: }createLinearGradient(x 1,y 1,x 2,y 2):パラメータは、グラデーションの開始位置と終了位置の横縦座標をそれぞれ表します.
addColorStop(offset,color):offsetは、設定された色のグラデーション開始位置からのずれ量を表し、取値範囲は0~1の浮動小数点値である.ランプ開始オフセット量は0、ランプ終了オフセット量は1である.colorはグラデーションの色です.
効果:
2、放射状グラデーションの描画
1: // canvas ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 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)'); 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)'); 21: for(var i = 0; i<10;i++) 22: { 23: context.beginPath(); 24: context.fillStyle=g2; 25: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true); 26: context.closePath(); 27: context.fill(); 28: }createRadialGradient(x 1,y 1,radius 1,x 2,y 2,radius 2):x 1,y 1,radius 1はそれぞれグラデーション開始円の円心横長座標と半径である.x 2,y 2,radius 2はそれぞれグラデーション終了円の円心横縦座標と半径である.
効果
二、図形変換
1、座標変換:パン、ズーム、回転
1: // canvas ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 6: } 7: // 8: var context = canvas.getContext('2d'); 9: context.fillStyle = '#eeeeff'; 10: context.fillRect(0,0,400,300); 11: // 12: context.translate(200,50); 13: context.fillStyle = 'rgba(255,0,0,0.25)'; 14: for(var i = 0; i<50;i++) 15: { 16: context.translate(25,25); 17: // 18: context.scale(0.95,0.95); 19: // 20: context.rotate(Math.PI / 10); 21: context.fillRect(0,0,100,50); 22: }translate(x,y):原点を平行移動し、x,yは左と下にどれだけの単位を移動するかを示し、デフォルトの単位はピクセルです.
scale(x,y):スケール、x,yは水平方向と垂直方向のスケールサイズを表します.1より小さく縮小し、1より大きく拡大します.
rotate(angle):回転、angleは回転角度、単位は弧です.0より大きい場合は時計回りに回転し、反時計回りに回転します.
効果:
2、マトリックス変換
1: // canvas ID 2: var canvas = document.getElementById('canvas'); 3: if (canvas == null) 4: { 5: return false; 6: } 7: // 8: var context = canvas.getContext('2d'); 9: // 10: var colors = ['red','orange','yellow','green','blue','navy','purple']; 11: // 12: context.lineWidth = 10; 13: // 14: context.transform(1,0,0,1,100,0); 15: // 16: for (var i = 0; i < colors.length; i++)17:{//原点を10個ずつ下げるpx
18: context.transform(1,0,0,1,0,10); 19: context.strokeStyle = colors[i]; 20: context.beginPath(); 21: context.arc(50,100,100,0,Math.PI,true); 22: context.stroke(); 23: }transform(m 11,m 12,m 21,m 22,dx,dy):新しい変換マトリクスを用いて現在の変換マトリクスと乗算する方法を変更した.dx,dyは原点座標の左シフトと下シフトの単位を表し、デフォルトは画素である.
変換マトリクスのフォーマットは次のとおりです.
m11 m12 dx
m21 m22 dy
0 0 1
最終的な効果:
まとめ:座標変換の方法はtransform()で代用でき、ルールは以下の通りです.
1、translate(x,y)<=>transform(1,0,0,1,dx,dy)またはtransform(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、 rotate(angle) <=> transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),- Math.sin(angle*Math.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):画像処理と描画テキスト