HTML5 холст с постоянными альфа-значениями - PullRequest
Новая
       65

HTML5 холст с постоянными альфа-значениями

0 голосов
/ 28 ноября 2018

Я разрабатываю инструмент для маскировки изображений, который помогает пользователю отмечать определенные области на базовом изображении.Я бы хотел, чтобы маска имела постоянное альфа-значение.Инструмент маскирования должен быть реализован на холсте HTML5.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я создаю несколько перекрывающих друг друга штрихов, их альфа-значения складываются, делая его менее прозрачным в перекрытиях.Принимая во внимание, что я хотел бы иметь постоянное альфа-значение независимо от перекрывающихся штрихов, поскольку пользователю может потребоваться несколько штрихов, чтобы полностью замаскировать регион. 

Here is the attached fiddle:

http://jsfiddle.net/o5x70fbd/

Дайте мне знать, если это известное решение

1 Ответ

0 голосов
/ 28 ноября 2018

Я не знаю, является ли это решение, которое вы ищете.Моя идея - использовать 2 холста.На первом холсте цвет обводки непрозрачен.Этот холст скрыт.Я использую display:none, но вы можете отключить его от DOM.

Затем вы копируете первый холст как изображение во второй с помощью ctx2.globalAlpha = .5;.это даст вам постоянное альфа-значение.

Изменения, которые я внес в ваш код: я помещаю точки в массивы и рисую, используя точки: 

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>
...