Question

我需要绘制一个形状然后添加阴影但是阴影已经填充了我需要它的颜色。我无法解释这种情况所以这里是一个关于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

Answer 1

http://jsfiddle.net/j8u8p/11/

注意：我所做的只是重新排列上下文调用并添加globalCompositeOperation

P.S。这看起来更好：http://jsfiddle.net/j8u8p/13/

p.p.s这是因为你呻吟着差距：http://jsfiddle.net/j8u8p/16/

画布：形状+阴影

1 个答案: