javascript - HTML5 Canvas 描边具有一致的 alpha 值

Question

我正在开发一种图像屏蔽工具，可以帮助用户标记底层图像上的某些区域。我希望蒙版具有一致的 alpha 值。屏蔽工具将在 HTML5 Canvas 中实现。

我面临的问题是，当我创建多个重叠笔划时，它们的 alpha 值会叠加，从而使其在重叠部分不那么透明。尽管我希望无论笔画重叠如何，都有一致的 alpha 值，因为用户可能需要多个笔画来完全遮盖某个区域。

Here is the attached fiddle:

http://jsfiddle.net/o5x70fbd/

请告诉我这是否是已知的解决方案

Answer 1

我不知道这是否是您正在寻找的解决方案。我的想法是使用 2 个 Canvas 。在第一个 Canvas 中，笔画的颜色是不透明的。该 Canvas 是隐藏的。我正在使用 display:none 但您可以让它不附加到 DOM。

然后，使用 ctx2.globalAlpha = .5; 将第一个 Canvas 复制为第二个 Canvas 中的图像。这将为您提供一致的 alpha 值。

我对您的代码所做的更改:我将点放入数组中，并使用这些点进行绘制:

var canvas = document.getElementById("myCanvas");
var canvas2 = document.getElementById("_2");
var ctx = canvas.getContext("2d");
var ctx2 = _2.getContext("2d");
var drawing = false;
let points = [];

var painting = document.getElementById("paint");
var paint_style = getComputedStyle(painting);
canvas.width = canvas2.width = parseInt(paint_style.getPropertyValue("width"));
canvas.height = canvas2.height = parseInt(
  paint_style.getPropertyValue("height")
);

var mouse = {
  x: 0,
  y: 0
};

let count = -1;
ctx.lineWidth = 30;
ctx.lineJoin = "round";
ctx.lineCap = "round";

_2.addEventListener(
  "mousemove",
  function(e) {
    if (drawing) {
      mouse.x = e.pageX - this.offsetLeft;
      mouse.y = e.pageY - this.offsetTop;
      points[count].push({ x: mouse.x, y: mouse.y });
      onPaint();
    }
  },
  false
);

_2.addEventListener(
  "mousedown",
  function(e) {
    drawing = true;
    count++;
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
    let ry = [];
    ry.push({ x: mouse.x, y: mouse.y });
    points.push(ry);
  },
  false
);

_2.addEventListener(
  "mouseup",
  function() {
    drawing = false;
    onPaint();
  },
  false
);

function onPaint() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  points.forEach(ry => {
    ctx.beginPath();
    ctx.moveTo(ry[0].x, ry[0].y);
    ry.forEach(p => {
      ctx.lineTo(p.x, p.y);
    });
    ctx.strokeStyle = "#00CC99";
    ctx.stroke();
  });

  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
  ctx2.globalAlpha = 0.5;
  ctx2.drawImage(canvas, 0, 0);
}

body {
    margin: 0px;
    padding: 0px;
}

#paint {
    width: 98%;
    height: 550px;
    border: 5px solid red;
}

#myCanvas{display:none;}

#_2{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/castell.jpg)}

<div id="paint">
    <canvas id="myCanvas"></canvas>
    <canvas id="_2"></canvas>
</div>