javascript - 具有一致 alpha 值的 HTML5 画布描边
问题描述
我正在开发一种图像遮罩工具,可以帮助用户在底层图像上标记特定区域。我希望掩码具有一致的 alpha 值。遮罩工具将在 HTML5 画布中实现。
我面临的问题是,当我创建多个重叠笔画时,它们的 alpha 值会堆叠,使其在重叠中不那么透明。而无论笔画是否重叠,我都想要一个一致的 alpha 值,因为用户可能需要多次笔画才能完全掩盖一个区域。
Here is the attached fiddle:
http://jsfiddle.net/o5x70fbd/
让我知道这是否是已知的解决方案
解决方案
我不知道这是否是您正在寻找的解决方案。我的想法是使用 2 个画布。在第一个画布中,描边的颜色是不透明的。此画布已隐藏。我正在使用display:none
,但您可以让它不附加到 DOM。
然后,您将第一个画布作为图像复制到第二个画布中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>
推荐阅读
- python - 使用 Python 和 R 语言进行矩阵乘法的不同结果
- java - Orika 映射器甚至映射空值 mapNulls(false) 和 mapNullsInReverse(false)
- php - 检查日期时间变量中是否设置时间的最简单方法是什么
- c# - 以主动活动模式在多台服务器上运行单个窗口服务
- java - 如何保证 AtomicLong addAndGet 结果的正确性
- react-native - Flatlist中每个旁边的文本组件反应原生
- ios - 从通知控制中心同时播放多个音频
- reactjs - ReactJS 文件上传
- html5-video - html5 视频的 Fullpage JS 中的控制台错误
- python - Proper way to iterate through a list which may not be a list