Html5-canvas-create-gradients
提供：Dev Guides
HTML5 Canvas-グラデーションを作成
HTML5キャンバスでは、次の方法を使用して、線形および放射状のグラデーションを使用して図形を塗りつぶしたりストロークを描画したりできます-
| Sr.No. | Method and Description |
|---|---|
| 1 |
addColorStop(offset, color) このメソッドは、指定された色のカラーストップを指定されたオフセットのグラデーションに追加します。 ここで、0.0はグラデーションの一方の端のオフセット、1.0はもう一方の端のオフセットです。 |
| 2 |
createLinearGradient(x0, y0, x1, y1) このメソッドは、引数で表される座標で指定された線に沿ってペイントする線形グラデーションを表すCanvasGradientオブジェクトを返します。 4つの引数は、グラデーションの開始点（x1、y1）と終了点（x2、y2）を表します。 |
| 3 |
createRadialGradient(x0, y0, r0, x1, y1, r1) このメソッドは、引数で表される円で与えられる円錐に沿ってペイントする放射状グラデーションを表すCanvasGradientオブジェクトを返します。 最初の3つの引数は座標（x1、y1）と半径r1の円を定義し、2番目の引数は座標（x2、y2）と半径r2の円を定義します。 |
線形グラデーションの例
以下は、上記の方法を使用して線形グラデーションを作成する簡単な例です。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type = "text/javascript">
function drawShape() {
//get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
//Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
//use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
//Create Linear Gradients
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
//assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
//draw shapes
ctx.fillRect(10,10,130,130);
ctx.strokeRect(50,50,50,50);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>上記の例では、次の結果が生成されます-
放射状グラデーションの例
以下は、上記の方法を使用して放射状グラデーションを作成する簡単な例です。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type = "text/javascript">
function drawShape(){
//get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
//Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
//use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
//Create gradients
var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
//draw shapes
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>上記の例では、次の結果が生成されます-
