HTML画布-文本阴影不能在Mac上工作

HTML Canvas - text-shadow not working on Mac?

本文关键字：Mac 工作 不能 阴影 画布 文本 HTML      更新时间：2023-09-26

代码如下:

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/

看起来safari坏了。如果你删除了渐变代码，safari会正确地添加文本阴影:

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

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

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

这个bug被修复了:http://trac.webkit.org/changeset/188148

相关文章：