带有 HTML5 画布元素的矩形渐变答案

【问题标题】：Rectangular Gradient with HTML5 Canvas Element带有 HTML5 画布元素的矩形渐变
【发布时间】：2011-08-11 18:59:24
【问题描述】：

如何使用 HTML5 画布元素绘制具有如下图所示渐变效果的矩形？

编辑：感谢所有反馈。是的，我已经尝试了很多方法。例如，我可以像@Loktar 建议的那样使用createRadialGradient 方法吗？下面是一些示例代码：

<html>
  <head>
    <title>test</title>
      <script type="application/x-javascript">
        function draw() {
          var canvas = document.getElementById("canvas"),
          ctx = canvas.getContext("2d");

          var grad1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 50);
          grad1.addColorStop(0, 'rgba(255, 252, 0, 1)');
          grad1.addColorStop(1, 'rgba(68, 205, 37, 1)');

          ctx.fillStyle = grad1;
          ctx.fillRect(0, 0, 100, 100);
       }
    </script>
  </head>
  <body onload="draw();">
    <div>
      <canvas id="canvas" width="100" height="100"></canvas>
    </div>
  </body>
</html>

但结果并不是我想要的：

这应该可以通过 GDI+ 提供的 PathGradientBrush 之类的方法轻松完成。我不确定 HTML5 画布元素是否可行。

【问题讨论】：

到目前为止你尝试过什么？ p.s. developer.mozilla.org/en/… 5 分钟，你就能做到！
嘿，大约 5 分钟。这是我可怕的尝试，甚至不打算将其发布为答案jsfiddle.net/loktar/MAjPQ/1
obv '5 mins' 意味着很容易阅读该文档并尝试轻松获得解决方案:)

标签： html canvas gradient

【解决方案1】：

您可以尝试结合使用线性渐变和剪裁。 Demo。代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var outerColor = 'rgba(68,205,37,1)';
var innerColor = 'rgba(255,252,0,1)';

var w = 200;
var h = 50;
canvas.width = w;
canvas.height = h;

function gradient(dir) {
    var grad = ctx.createLinearGradient(dir[0], dir[1], dir[2], dir[3]);

    grad.addColorStop(0, outerColor);
    grad.addColorStop(0.5, innerColor);
    grad.addColorStop(1.0, outerColor);

    return grad;
}

// idea: render background gradient and a clipped "bow"
function background() {
    ctx.fillStyle = gradient([0, 0, 0, h]);
    ctx.fillRect(0, 0, w, h);
}

function bow() {
    ctx.save();

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(w, h);
    ctx.lineTo(w, 0);
    ctx.lineTo(0, h);
    ctx.clip();

    ctx.fillStyle = gradient([0, 0, w, 0]);
    ctx.fillRect(0, 0, w, h);

    ctx.restore();
}

background();
bow();

【讨论】：