HTML5画布元素实现的矩形渐变

Question

HTML5画布元素实现的矩形渐变

6

我该如何使用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>

但结果并不是我想要的那样：

result

这应该很容易地通过像GDI+提供的PathGradientBrush这样的方法来完成。我不确定HTML5 canvas元素是否可以实现。

- dreamsfrag

2

你目前尝试了什么？附注：https://developer.mozilla.org/en/Canvas_tutorial%3aApplying_styles_and_colors 5分钟后，你就能做到！ - stecb

1

不知道大概需要五分钟，这是我的可怕尝试，甚至不会把它发表为答案：http://jsfiddle.net/loktar/MAjPQ/1/ - Loktar

显然，“5分钟”意味着阅读该文档并轻松尝试解决问题 :) - stecb

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Juho Vepsäläinen · Accepted Answer

你可以尝试使用线性渐变和裁剪的组合来实现。演示。代码如下:

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();