javascript – HTML Canvas – 文字阴影无法在Mac上运行？

这是代码：

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

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

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

解决方法:

看起来野生动物园很破碎.如果删除渐变代码,则safari会正确添加文本阴影：

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

如果你绘制阴影然后在顶部绘制渐变它在safari中工作….这是一个可怕的黑客但它的工作原理：

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

【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！