Fabric.js晕影效果

Question

我正在尝试使用fabric.js创建装饰效果这是我的代码：

var canvas = new fabric.Canvas('c', {backgroundColor : "#ff0"});
canvas.setWidth(300);
canvas.setHeight(300);
 
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(oImg) {
  canvas.add(oImg);

  canvas.item(0).set({
    
	clipPath: new fabric.Circle({
        radius: 100,
        originX: 'center',
        originY: 'center',
      })
  });
  canvas.item(0).center();
  canvas.setActiveObject(canvas.item(0));
canvas.renderAll();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<canvas id="c" width="300" height="300" style="border:2px solid #000000"></canvas>

如何使狗的图像在边缘周围淡入黄色背景？谢谢

Answer 1

您实际上可以仅使用CSS来简化所有方法：

.vignette-inset {
  position: relative;
  width: 300px;
  height: 300px;
  display: block;
  background-image: url('http://fabricjs.com/assets/pug_small.jpg');
  background-size: cover;
}

.vignette-inset:after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  box-shadow: inset 0px 0px 150px yellow;
}

/* removing shadow on hover
for demonstration purposes */
.vignette-inset:hover:after {
  box-shadow: none;
}

<div class='vignette-inset' />

Answer 2

除了使用clipath之外，您还可以使用渐变填充将矩形覆盖在图像顶部。诸如此类（未测试）：

var rect = new fabric.Rect({
    top: 0,
    left: 0,
    width: /*same as the image*/,
    height: /*same as the image*/,
})

rect.setGradient('fill', {
  type: 'radial',
  colorStops: {
    0: 'rgba(255, 255, 0, 0)', 
    1: 'rgba(255, 255, 0, 0)'
    2: 'rgba(255, 255, 0, 1)'
  }
});