Javascript 软边html5画布
因此,我正在创建一个类似绘画的应用程序,我希望线条周围有软边,这样线条就不会参差不齐。为此,我使用Javascript 软边html5画布,javascript,jquery,html,html5-canvas,Javascript,Jquery,Html,Html5 Canvas,因此,我正在创建一个类似绘画的应用程序,我希望线条周围有软边,这样线条就不会参差不齐。为此,我使用rgba对笔划进行分层。下面是一些代码: $('canvas').mousemove(function(e){ // test if user is pressing down if(going == true){ x = e.pageX; y = e.pageY; // w is the line width, and the las
rgba
对笔划进行分层。下面是一些代码:
$('canvas').mousemove(function(e){
// test if user is pressing down
if(going == true){
x = e.pageX;
y = e.pageY;
// w is the line width, and the last 4 inputs are rgba for the color
draw(x,y,w+5,100,100,100,0.1);
draw(x,y,w+4,100,100,100,0.3);
draw(x,y,w+3,100,100,100,0.5);
draw(x,y,w+2,100,100,100,0.7);
draw(x,y,w+1,100,100,100,0.9);
draw(x,y,w,100,100,100,1);
};
});
起初,这可以创建软边,但由于某些原因,它们会随着您继续绘制而逐渐消失,并再次变得锯齿状!下面是一个JSFIDLE,它更明显地显示了模糊是如何淡入的(通过使用与笔划颜色不同的模糊颜色):
问题:
为什么会发生这种情况,我怎样才能阻止它
额外代码:
如果您想查看draw
函数,请参见:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function draw(x,y,w,r,g,b,a){
ctx.lineWidth = w;
ctx.lineTo(x, y);
ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
ctx.stroke()
};
检查这是否是你想要的 加上
之所以会产生这种效果,是因为您在鼠标按下时启动一个新路径,然后在每个鼠标移动时向路径添加一个新点,然后绘制路径。这意味着您一次又一次地重新绘制路径的相同部分,这会将半透明像素添加到一起,从而破坏柔和度 我建议使用渐变圆作为“画笔”。下面是一个经过修改的JSFIDLE: 对绘图功能进行了主要更改:
function draw(x,y,w,r,g,b,a){
var gradient = ctx.createRadialGradient(x, y, 0, x, y, w);
gradient.addColorStop(0, 'rgba('+r+', '+g+', '+b+', '+a+')');
gradient.addColorStop(1, 'rgba('+r+', '+g+', '+b+', 0)');
ctx.beginPath();
ctx.arc(x, y, w, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
};
这将创建一个点。因此,在mousemove中,我们需要多次调用它(取决于上次mousemove事件后鼠标坐标发生了多大变化),以创建一条连续的线条,正如您在jsfiddle中看到的那样。这会模糊整个画布,这不是我想要的,因为上面也可能有图像和文本这是天才!!!我以前试过梯度,但它造成了这样的滞后!这不需要,谢谢
draw(x,y,w+5,0,0,0,0.9);
function draw(x,y,w,r,g,b,a){
var gradient = ctx.createRadialGradient(x, y, 0, x, y, w);
gradient.addColorStop(0, 'rgba('+r+', '+g+', '+b+', '+a+')');
gradient.addColorStop(1, 'rgba('+r+', '+g+', '+b+', 0)');
ctx.beginPath();
ctx.arc(x, y, w, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
};