开发者

HTML Canvas - text-shadow not working on Mac?

开发者 https://www.devze.com 2023-02-27 23:44 出处:网络
Here is the code: var surface = document.getElementById(\"myCanvas\"); if (surface.getContext) { var context = surface.getContext(\'2d\');

Here is the code:

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

      context.shadowOffsetX = 2;
      context.shad开发者_如何学PythonowOffsetY = 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);
}

the shadow just looks like a 1px outline... any ideas?

Live demo: http://jsfiddle.net/simevidas/MDgR3/


Looks like safari is broken. If you remove the gradient code then safari correctly adds the text shadow:

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

If you draw the shadow and then draw the gradient over the top it works in safari.... this is a horrible hack but it works:

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


This bug was just fixed by the following commit: http://trac.webkit.org/changeset/188148

0

精彩评论

暂无评论...
验证码 换一张
取 消