画布:形状+阴影

3

我需要画一个形状,然后添加阴影,但是阴影会覆盖填充颜色,我希望它在下面.. 我无法很好地解释情况,这里有一个在jsfiddle上的示例

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;     
context.fillStyle = "#8ED6FF";
context.strokeStyle = "#0000ff";     
context.shadowColor = "#000000";
context.shadowBlur    = 2;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.fill();     
context.stroke();

http://jsfiddle.net/j8u8p/ thx


@DC_ 你正在使用一个旧的(或者不好的)浏览器吗? - Barrie Reader
接受一些答案 @Issam Zoli - 如果您接受了一些答案,您将会得到更好的答案... - Barrie Reader
不好意思 @Neurofluxation,我得到了一个404页面。你能用吗? - HellaMad
http://jawbfl.blogspot.com/2012/02/canvas-shape-shadow.html - Issam Zoli
1个回答

3

1
确实,它允许基本的混合模式 - 就像 Photoshop ^_^ - Barrie Reader
但是形状和阴影之间有一个空格!! - Issam Zoli
请确保返回到:context.globalCompositeOperation = "source-over"; - 这是默认值 ^_^ - Barrie Reader

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接