渐变填充和画布大小？答案

【问题标题】：gradient fill and canvas size?渐变填充和画布大小？
【发布时间】：2012-02-13 23:53:24
【问题描述】：

下面的代码显示了一个径向渐变填充的矩形。如果我取消注释设置画布宽度和高度的两条线，它会显示一个黑色矩形而不是渐变填充的矩形。为什么？如何设置宽度和高度，仍然可以显示渐变？

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function on_load(e) {
        var container = document.getElementById("container");
        var canvas = container.appendChild(document.createElement("canvas"));
        var context = canvas.getContext("2d");
        var gradient = context.createRadialGradient(30, 30, 10, 30, 30, 30);

        gradient.addColorStop(0, "rgba(0,0,0,1)");
        gradient.addColorStop(1, "rgba(0,0,0,0)");

        context.fillStyle = gradient;

        //canvas.width = 150;
        //canvas.height = 150;

        context.fillRect(0, 0, 60, 60);
      }
    </script>
  </head>
  <body onload="on_load()"><div id="container"></div></body>
</html>

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

您必须在使用其上下文之前更改画布大小

【讨论】：

【解决方案2】：

我认为原因是设置宽度或高度会清除画布及其设置。

【讨论】：