gpt4 book ai didi

javascript - HTML5 Canvas globalAlpha 不工作

转载 作者:行者123 更新时间:2023-11-28 19:23:38 25 4
gpt4 key购买 nike

我需要在没有 clearRect 方法的情况下使用透明创建平滑的绘图线,我尝试使用:globalAlphaStrokeStyle 与 rgba,如下所示:

ctx.StrongStyle = "rgba( redChannel, greenChannel, blueChannel, AlphaChannel)";

但这两种方法都不起作用。我如何在没有 clearRect 方法的情况下绘制透明线。虽然我在每次绘制 globalAlpha 之前使用 clearRect 工作,但我需要在没有它的情况下工作。

我的代码示例:

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.globalAlpha = "0.2";
//ctx.strokeStyle = "rgba(255, 0, 0, 150)";
ctx.strokeStyle = "red";

var isDrawing, points = [ ];

el.onmousedown = function(e) {
isDrawing = true;
points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
if (!isDrawing) return;

//ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
points.push({ x: e.clientX, y: e.clientY });

ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();
ctx.closePath();

};

el.onmouseup = function() {
isDrawing = false;
points.length = 0;
};
canvas { border: 1px solid #ccc }
<canvas id="c" width="500" height="300"></canvas>

最佳答案

每次鼠标移动时,您都会重新绘制整个路径,因此即使将 globalAlpha 值设置为 0.2,分层效果也会使线条显示为实心。

选项 1:使用clearRect清除路径onmousemove然后重绘;

选项 2:仅绘制路径的最后一段,但重叠可见:

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.globalAlpha = "0.2";
//ctx.strokeStyle = "rgba(255, 0, 0, 150)";
ctx.strokeStyle = "red";

var isDrawing, points = [ ];

el.onmousedown = function(e) {
isDrawing = true;
points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
if (!isDrawing) return;

//ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
points.push({ x: e.clientX, y: e.clientY });

ctx.beginPath();

//draw just the last segment
if(points.length>1) {
ctx.moveTo(points[points.length-2].x, points[points.length-2].y);
ctx.lineTo(points[points.length-1].x, points[points.length-1].y);
}
ctx.stroke();
ctx.closePath();

};

el.onmouseup = function() {
isDrawing = false;
points.length = 0;
};
canvas { border: 1px solid #ccc }
<canvas id="c" width="500" height="300"></canvas>

选项 3:设置 canvas 元素的不透明度

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
//ctx.globalAlpha = "0.2";
//ctx.strokeStyle = "rgba(255, 0, 0, 150)";
ctx.strokeStyle = "red";

var isDrawing, points = [ ];

el.onmousedown = function(e) {
isDrawing = true;
points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
if (!isDrawing) return;

//ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
points.push({ x: e.clientX, y: e.clientY });

ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();
ctx.closePath();

};

el.onmouseup = function() {
isDrawing = false;
points.length = 0;
};
canvas { border: 1px solid #ccc; opacity:0.2; }
<canvas id="c" width="500" height="300"></canvas>

关于javascript - HTML5 Canvas globalAlpha 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28321588/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com