부드러운 가장자리 html5 캔버스

Question

그래서 페인트와 같은 앱을 만들고 있는데, 가장자리가 부드러운 가장자리로되어있어 들쭉날쭉하지 않습니다. 이렇게 쉽게 스트로크를 레이어하려면 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() 
}; 

Answer 1

이 효과를 얻는 이유는 마우스를 사용하여 새 경로를 시작한 다음 각 mousemove에 경로에 새 점을 추가 한 다음 패스를 그려야하기 때문입니다. 즉, 경로의 동일한 부분을 다시 그리며 다시 반투명 픽셀을 추가하여 부드러움을 없앱니다.

그라데이션 서클을 대신 "브러시"로 사용하는 것이 좋습니다. http://jsfiddle.net/yB3Kr/

주요 변경 사항이 draw 함수로 수행됩니다 :이 점을 생성

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(); 
}; 

다음은 수정 된 jsfiddle입니다. 그러므로 mousemove에서 jsfiddle에서 볼 수 있듯이 연속 마우스를 여러 번 호출해야합니다 (마지막 mousemove 이벤트 이후에 마우스 코드가 변경된 정도에 따라 다름).

Answer 2

확인 당신이 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);