Прямоугольный градиент с элементом HTML5 Canvas - PullRequest
Новая
       24

Прямоугольный градиент с элементом HTML5 Canvas

6 голосов
/ 11 августа 2011

Как нарисовать прямоугольник с эффектом градиента, подобным изображенному ниже, используя элемент холста HTML5?

sample

Редактировать: Спасибо за все отзывы.Да, я уже перепробовал много методов.Например, могу ли я использовать метод createRadialGradient, как предлагает @Loktar?Вот пример кода: 

<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

Это должно быть легко сделано с помощью метода, подобного PathGradientBrush предоставлено GDI +.Я не уверен, что это возможно с элементом HTML5 canvas.

1 Ответ

4 голосов
/ 24 августа 2011

Вы можете попробовать использовать комбинацию линейного градиента и отсечения. Демо .Код: 

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