Créer un réaliste outil crayon pour une peinture à l'application avec HTML5 Canvas

D'abord je tiens à dire que j'ai fait beaucoup de recherche et essaie moi-même, sans aucun succès.

Je suis en train de travailler sur un MSPaint-comme le demande l'aide de la Toile, et je voudrais créer un outil crayon qui semble réaliste comme à la main des dessins... Voici un exemple dans le lien ci-dessous avec la valeur par défaut de l'outil :
http://www.onemotion.com/flash/sketch-paint/

J'ai essayé de jouer avec mousespeed et de la largeur de raie des propriétés, mais il ne fonctionnait pas bien (l'ensemble de la ligne de l'agrandir et de rétrécir comme je bouge la souris). Je n'ai aucune idée d'un algorithme agissant sur le pixel de données brutes.

Savez-vous quelque chose d'existant ou un algorithme à appliquer ? Merci beaucoup pour votre aide

MODIFIER

J'ai décidé d'ajouter la solution que j'ai choisie parce qu'elle semble l'intéresser beaucoup de gens.
Donc, la meilleure chose que j'ai trouvé pour l'instant est de dessiner une image sur la toile, à l'aide de la technique expliquée ici : http://css.dzone.com/articles/sketching-html5-canvas-and.
Il fonctionne comme un charme, le résultat est vraiment convaincant et c'est assez facile à mettre en œuvre. Essayer ici : http://tricedesigns.com/portfolio/sketch/brush.html#

OriginalL'auteur jazzytomato | 2012-04-12

  1. 23

    Vous pouvez essayer quelque chose comme la démonstration suivante

    Démonstration En Direct

    Votre plus probable à l'aide de moveTo et lineTo pour créer des chemins, si vous le faites de cette façon, les propriétés seront partagés pour le chemin jusqu'à la fermeture de la voie. Donc, chaque fois que vous modifiez l'épaisseur youd besoin d'appeler closePath et puis beginPath de nouveau.

    Dans mon exemple, j'utilise Bresenham ligne de l'algorithme pour tracer les points. Fondamentalement, onmousedown, il commence à peindre. Puis onmousemove il compare les coordonnées actuelles avec les dernières coordonnées et les parcelles de tous les points entre les deux. Il est aussi à l'aide de fillRect à la peinture. En fonction de la vitesse de votre déménagement, la ligne sera plus ou moins épais.

    Voici le code pour la fonction de dessin

    var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
painting = false,
lastX = 0,
lastY = 0,
lineThickness = 1;
canvas.width = canvas.height = 600;
ctx.fillRect(0, 0, 600, 600);
canvas.onmousedown = function(e) {
painting = true;
ctx.fillStyle = "#ffffff";
lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
};
canvas.onmouseup = function(e){
painting = false;
}
canvas.onmousemove = function(e) {
if (painting) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
//find all points between        
var x1 = mouseX,
x2 = lastX,
y1 = mouseY,
y2 = lastY;
var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
if (steep){
var x = x1;
x1 = y1;
y1 = x;
var y = y2;
y2 = x2;
x2 = y;
}
if (x1 > x2) {
var x = x1;
x1 = x2;
x2 = x;
var y = y1;
y1 = y2;
y2 = y;
}
var dx = x2 - x1,
dy = Math.abs(y2 - y1),
error = 0,
de = dy / dx,
yStep = -1,
y = y1;
if (y1 < y2) {
yStep = 1;
}
lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
if(lineThickness < 1){
lineThickness = 1;   
}
for (var x = x1; x < x2; x++) {
if (steep) {
ctx.fillRect(y, x, lineThickness , lineThickness );
} else {
ctx.fillRect(x, y, lineThickness , lineThickness );
}
error += de;
if (error >= 0.5) {
y += yStep;
error -= 1.0;
}
}
lastX = mouseX;
lastY = mouseY;
}
}

    sympa tout ça, merci.
    j'ai essayé de mettre en œuvre la même chose à l'aide de jquery mobile. Je suis en mesure d'obtenir touchevents, mais incapable de tracer la ligne. peut-u s'il vous plaît aider? merci:)

    OriginalL'auteur Loktar