HTML5 canvas 具有一致 alpha 值的笔画
HTML5 canvas stroke with consistent alpha values
我正在开发一种图像遮罩工具,可以帮助用户在底层图像上标记特定区域。我希望蒙版具有一致的 alpha 值。屏蔽工具将在 HTML5 canvas.
中实施
我面临的问题是,当我创建多个重叠笔触时,它们的 alpha 值会叠加,从而使其在重叠部分的透明度降低。而我想要一个一致的 alpha 值,而不管笔画是否重叠,因为用户可能需要多个笔画来完全遮盖一个区域。
Here is the attached fiddle:
http://jsfiddle.net/o5x70fbd/
让我知道这是否是已知解决方案
我不知道这是否是您正在寻找的解决方案。我的想法是使用 2 canvases。在第一个 canvas 中,描边的颜色是不透明的。这个 canvas 是隐藏的。我正在使用 display:none
,但您可以让它独立于 DOM。
然后将第一个 canvas 作为图像复制到第二个 ctx2.globalAlpha = .5;
中。这将为您提供一致的 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>
我正在开发一种图像遮罩工具,可以帮助用户在底层图像上标记特定区域。我希望蒙版具有一致的 alpha 值。屏蔽工具将在 HTML5 canvas.
中实施我面临的问题是,当我创建多个重叠笔触时,它们的 alpha 值会叠加,从而使其在重叠部分的透明度降低。而我想要一个一致的 alpha 值,而不管笔画是否重叠,因为用户可能需要多个笔画来完全遮盖一个区域。
Here is the attached fiddle:
http://jsfiddle.net/o5x70fbd/
让我知道这是否是已知解决方案
我不知道这是否是您正在寻找的解决方案。我的想法是使用 2 canvases。在第一个 canvas 中,描边的颜色是不透明的。这个 canvas 是隐藏的。我正在使用 display:none
,但您可以让它独立于 DOM。
然后将第一个 canvas 作为图像复制到第二个 ctx2.globalAlpha = .5;
中。这将为您提供一致的 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>