パスにグラデーションで色を塗る

パスにグラデーションで色を塗るには、pathStyleにグラデーションを指定します。

描画メソッド/プロパティ	内容
createLinearGradient(x1, y1, x2, y2)	線形グラデーションの生成
createRadialGradient(x1, y1, r1, x2, y2, r2)	円形グラデーションの生成
addColorStop(オフセット, 色)	グラデーションの色を指定

---

---

---

<canvas id="drawGradientPathCanvas1" onmouseover="drawGradientPath1();" style="border: 1px solid;" width="400" height="300"></canvas>
<script language="javascript" type="text/javascript">
function drawGradientPath1() {
    var c = document.getElementById("drawGradientPathCanvas1");
    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(350, 100);
    context.lineTo(80, 250);
    context.lineTo(200, 50);
    context.lineTo(320, 250);
    context.closePath();
    var g = context.createLinearGradient(0, 0, 300, 300);
    g.addColorStop(0.3, "#FF0000");
    g.addColorStop(1, "#00FF00");
    context.fillStyle = g;
    context.fill();
    context.stroke();
}
</script>

---

以下の例は、上の「createLinearGradient」を「createRadialGradient」に変えただけの例になります。

---

---

---

<canvas id="drawGradientPathCanvas2" style="border: 1px solid;" onmouseover="drawGradientPath2();" width="400" height="300"></canvas>
<script language="javascript" type="text/javascript">
function drawGradientPath2() {
    var c = document.getElementById("drawGradientPathCanvas2");
    var context = c.getContext("2d");
    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(350, 100);
    context.lineTo(80, 250);
    context.lineTo(200, 50);
    context.lineTo(320, 250);
    context.closePath();
    var g = context.createRadialGradient(200, 150, 50, 200, 150, 100);
    g.addColorStop(0.3, "#FF0000");
    g.addColorStop(1, "#00FF00");
    context.fillStyle = g;
    context.fill();
    context.stroke();
}
</script>

---