HTML Canvas - текстовая тень не работает на Mac? - PullRequest
4 голосов
/ 23 апреля 2011

Вот код:

var surface = document.getElementById("myCanvas");
    if (surface.getContext) {
      var context = surface.getContext('2d');

      context.shadowOffsetX = 2;
      context.shadowOffsetY = 2;
      context.shadowBlur = 5;
      context.shadowColor = "rgba(0, 0, 0, 0.5)";

      context.textBaseline = "top";
      context.font = "125px helvetica";
      context.textAlign = "center";

      var gradient = context.createLinearGradient(0, 0, 0, 150);
      gradient.addColorStop(0, "rgb(22,28,106)");
      gradient.addColorStop(1, "rgb(19,25,98)");

      context.fillStyle = gradient;
      context.fillText("Some Title", 450, 10);
}

тень выглядит как контур в 1 пиксель ... есть идеи?

Демонстрационная версия: http://jsfiddle.net/simevidas/MDgR3/

Ответы [ 2 ]

4 голосов
/ 27 апреля 2011

Похоже, сафари сломано.Если вы удалите код градиента, тогда safari правильно добавит текстовую тень:

http://jsfiddle.net/hv5zR/1/

Если вы рисуете тень, а затем рисуете градиент сверху, это работает в сафари ....это ужасный хак, но он работает:

http://jsfiddle.net/thebeebs/nUbZX/

1 голос
/ 07 августа 2015

Эта ошибка была исправлена ​​следующим коммитом: http://trac.webkit.org/changeset/188148

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...