bords doux html5 toile

Question

Je crée donc une application ressemblant à de la peinture, et je voudrais avoir des bords doux autour des lignes afin qu'ils ne soient pas irréguliers. Pour le faire facilement, j'utilise rgba pour superposer des traits. Voici un code:

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

Dans un premier temps, cela fonctionne dans la création des bords souples, mais pour une raison quelconque, ils se fanent en tant que vous continuez à dessiner et devenir à nouveau en dents de scie! Voici un jsFiddle avec un affichage plus évident de la façon dont la disparition progressive se fane en (en utilisant une couleur de flou différent de la couleur de la course): http://jsfiddle.net/mj4zn/1/

Question:

Pourquoi cela se produit, et comment puis-je arrêter?

code supplémentaire:

Si vous voulez regarder la fonction draw, la voici:

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

La raison pour laquelle vous obtenez cet effet est que vous commencez un nouveau chemin avec la souris, puis sur chaque mousemove, vous ajoutez un nouveau point au chemin, puis dessinez le chemin. Cela signifie que vous redessinez les mêmes parties du chemin encore et encore, ce qui ajoute les pixels semi-transparents ensemble, ce qui annule la douceur.

Je suggérerais simplement d'utiliser un cercle dégradé comme une "brosse" à la place. Voici un jsFiddle modifié: http://jsfiddle.net/yB3Kr/

Les principaux changements sont effectués à la fonction de tirage:

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

Cela crée un point. Donc, dans le mousemove, nous devons l'appeler plusieurs fois (en fonction de combien le coord de la souris a changé depuis le dernier événement de mousemove) pour créer une ligne continue, comme vous pouvez le voir dans le jsfiddle.

Answer 2

Vérifiez si c'est ce que vous voulez 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+ ')'; 

plus

draw(x,y,w+5,0,0,0,0.9);