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

在canvas1.clip()

附近执行此操作

另外，不是叫它canvas1，你应该把它叫做ctx或context，因为它不是画布，它是一个上下文，对吗？

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()

在画布的裁减区域之外的Dropshadow

1 个答案: