Question

以下是代码：

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

阴影看起来像1px轮廓......任何想法？

现场演示： http://jsfiddle.net/simevidas/MDgR3/

Answer 1

看起来safari破了。如果删除渐变代码，则safari会正确添加文本阴影：

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

如果你绘制阴影，然后在顶部绘制渐变，它可以在safari中运行....这是一个可怕的黑客，但它有效：

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

Answer 2

此错误仅由以下提交修复： http://trac.webkit.org/changeset/188148

HTML Canvas - text-shadow在Mac上不起作用？

2 个答案: