画布剪切区域外的阴影

Question

我正在通过画布将图像剪裁成三角形，现在我想在它外面添加一个阴影。怎么办？

canvas1_img.src = "images/postcard.jpg";

var canvas_wd = 1600;
var canvas_ht = 1000;
var y1 = 330;
var y2 = 682;

canvas1.beginPath();
canvas1.moveTo(0, y1);
canvas1.lineTo(0, y2);
canvas1.lineTo(canvas_wd, canvas_ht);
canvas1.lineTo(canvas_wd, 0);
canvas1.closePath();
canvas1.clip();

canvas1.drawImage(canvas1_img,0,0);

Answer 1

就这样做ctx.clip()：

ctx.shadowOffsetX = 2; // Sets the shadow offset x, positive number is right
ctx.shadowOffsetY = 2; // Sets the shadow offset y, positive number is down
ctx.shadowBlur = 4; // Sets the shadow blur size
ctx.shadowColor = 'rgba(0, 0, 0, 0.6)'; // Sets the shadow color
ctx.fillStyle = 'none';
ctx.fill();