Canvasによるグラデーションサンプル

icon 項目のみ表示/展開表示の切り替え

Canvasによるグラデーションの描画


createLinearGradient(x1,y1,x2,y2)

グラデーションの範囲と方向を指定します。範囲を超えると始点または終点の色が連続して適用されます。
また座標値は図形に対して相対座標ではなく、Canvas上の座標となります。translate等の移動、回転、変形等の影響を受けます。
上図の表示例ででは、上下の四角形のグラデーションの模様の位置が一致していることから、図形に対して相対的な座標でグラデーションが行われていないことがわかるかとと思います。SVGのグラデーションとは異なります。
相似形の図形でグラデーションを行う場合は、translate等で移動させた方が楽です。下図はtranslateを適用した例で図形に対して相対的な座標でグラデーションが描画されているのがわかります。

addColorStop(offset,color)

グラデーションに色を追加します。offsetは0～1.0でなければいけません。
colorに追加する色を指定します。

createRadialGradient(x1,y1,r1,x2,y2,r2)

円形（放射状）のグラデーションを作成します。 中心x1,y1　半径r1から中心x2,y2 半径r2に向かってグラデーションが描画されます。
範囲を超えると始点または終点の色が連続して適用されます。
また座標値は図形に対して相対座標ではなく、Canvas上の座標となります。translate等の移動、回転、変形等の影響を受けます。
上図の表示例ででは、左側はグラデーションがきれいにかかっていますが、右側はグラデーションの範囲外のため終点値で描画されており図形に対して相対的な座標でグラデーションが行われていないことがわかるかとと思います。SVGのグラデーションとは異なります。
相似形の図形でグラデーションを行う場合は、translate等で移動させた方が楽です。下図はtranslateを適用した例で図形に対して相対的な座標でグラデーションが描画されているのがわかります。

上図と下図のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="t1" width="400" height="100">
  </canvas><br />
  <canvas id="t2" width="400" height="100">
  </canvas>
  <script type="text/javascript">
    window.onload = function(){
      var canvas = document.getElementById('t1');
      var canvas2 = document.getElementById('t2');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        var ctx2 = canvas2.getContext('2d');
        var grad=ctx.createLinearGradient(0,0,180,0);
        grad.addColorStop(0,'red');
        grad.addColorStop(1/6,'yellow');
        grad.addColorStop(2/6,'green');
        grad.addColorStop(3/6,'cyan');
        grad.addColorStop(4/6,'blue');
        grad.addColorStop(5/6,'magenta');
        grad.addColorStop(1,'red');
        ctx.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
        ctx.fillStyle = grad;
        ctx.fillRect(0,0,180,50);
        ctx.fillRect(10,50,180,50);
        var rgrad=ctx.createRadialGradient(230,30,5,250,50,50);
        rgrad.addColorStop(0,'rgb(100,200,255)');
        rgrad.addColorStop(1,'blue');
        ctx.fillStyle=rgrad;
        ctx.beginPath();
        ctx.arc(250,50,50,0,2*Math.PI,false);
        ctx.arc(350,50,50,0,2*Math.PI,false);
        ctx.fill();
        ctx2.fillStyle = grad;
        ctx2.fillRect(0,0,180,50);
        ctx2.translate(10,0);
        ctx2.fillRect(0,50,180,50);
        ctx2.translate(-10,0);
        ctx2.fillStyle=rgrad;
        ctx2.beginPath();
        ctx2.arc(250,50,50,0,2*Math.PI,false);
        ctx2.fill();
        ctx2.translate(100,0);
        ctx2.beginPath();
        ctx2.arc(250,50,50,0,2*Math.PI,false);
        ctx2.fill();
      }
    }
  </script>
</body>
</html>
ソースファイルのダウンロード(grad.zip)