渲染上的 FabricJS 不透明度问题

Question

我正在尝试在我的 canvas 上渲染这张照片：

但这是使用 FabricJS 呈现的方式：

顺便说一下，使用 EaselJS 同样的图片可以正常渲染

我的 CoffeeScript：

renderPicture = (pic) ->
  pic.left = coords.x - (pic.width / 2)
  pic.top = coords.y - (pic.height / 2)
  canvas.add(pic)

image = new fabric.Image.fromURL '/images/medium/missing.png', renderPicture, {
  opacity: 1
}

如您所见，图片的不透明度为1，但我仍然看到不透明度为0.5。如何解决？

Answer 1

问题出在我的 HTML 中的硬编码不透明度。

<canvas id="editorWindow" style="background-color: rgba(255, 194, 93, 0.4)">
</canvas>

CreateJS 忽略了这一点，但对于 FabricJS 来说这很关键。您应该使用 buitl-in function 来更改背景颜色。

渲染上的 FabricJS 不透明度问题

FabricJS opacity issues on render

javascript

canvas

fabricjs