所以我正在创建一个类似油漆的应用程序,我希望在线条周围有柔软的边缘,这样它们就不会锯齿状。为了方便起见,我使用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);
};
});
首先,这可以创建柔和的边缘,但由于某种原因,它们会在您继续绘制时逐渐消失并再次变得锯齿状!这是一个jsfiddle,更明显地显示模糊渐渐消失(通过使用与笔触颜色不同的模糊颜色):http://jsfiddle.net/mj4zn/1/
为什么会这样,我怎么能阻止它?
如果你想查看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()
};
答案 0 :(得分:6)
你得到这种效果的原因是因为你在鼠标按下时开始一个新的路径,然后在每个鼠标上移动你向路径添加一个新点,然后绘制路径。这意味着您一次又一次地重绘路径的相同部分,这会将半透明像素加在一起,从而破坏柔软度。
我建议只使用渐变圆作为"画笔"代替。这是一个经过修改的jsfiddle:http://jsfiddle.net/yB3Kr/
对绘制函数进行了主要更改:
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中看到的那样。
答案 1 :(得分:0)
检查这是否是您想要的http://jsfiddle.net/mj4zn/2/
function draw(x,y,w,r,g,b,a){
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
canvas.style.webkitFilter = "blur(1px)";
ctx.lineWidth = w;
ctx.lineTo(x, y);
ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' +a+ ')';
加
draw(x,y,w+5,0,0,0,0.9);