HTML5 Canvas change les couleurs de toutes les lignes

J'ai fait une simple application de dessin avec HTML5 canvas. Vous cliquez dans deux positions différentes pour tracer une ligne d'un point à un autre. J'ai également deux zones d'entrée de texte où vous pouvez modifier l'épaisseur du trait et de la couleur. Problème c'est que quand je change la couleur d'une ligne, il change tous précédemment tracé des lignes. Cela se produit également lors de la modification de l'épaisseur de la ligne, mais seulement si je tire un trait plus épais qu'avant (si je dessine une ligne plus mince les autres lignes ne changent pas).

Je suis nouveau sur le HTML5 et le tous de sorte que toute aide serait grandement appréciée.

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas width="300" height="300" id="myCanvas"></canvas>
<br />
<input type="button" value="Enter Coordinates" onclick="enterCoordinates()"></input>
Line Width: <input type="text" id="lineWidth"></input>
Line Color: <input type="text" id="lineColor"></input>
<script type="text/javascript">
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,300,300);
function drawLine(start,start2,finish,finish2)
{
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
//optional variables
lineWidth = document.getElementById('lineWidth').value;
if (lineWidth)
{
ctx.lineWidth=lineWidth;
}
lineColor = document.getElementById('lineColor').value;
if (lineColor)
{
ctx.strokeStyle=lineColor;
}
ctx.moveTo(start,start2);
ctx.lineTo(finish,finish2);
ctx.stroke();
}
function enterCoordinates()
{
var values = prompt('Enter values for line.\n x1,y1,x2,y2','');
var start = values.split(",")[0];
var start2 = values.split(",")[1];
var finish = values.split(",")[2];
var finish2 = values.split(",")[3];
drawLine(start,start2,finish,finish2);
}
</script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousedown", getPosition, false);
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("myCanvas");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else //Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
if (window.startx)
{
window.finishx = x;
window.finishy = y;
drawLine(window.startx,window.starty,window.finishx,window.finishy);
//reset
window.startx = null;
}
else
{
window.startx = x;
window.starty = y;
}
}
</script>
</body>
</html>

source d'informationauteur sc8ing

  1. 24

    Il suffit d'ajouter une closePath() appel (ainsi que beginPath) où vous dessinez votre ligne, comme ceci:

    ctx.beginPath();
ctx.moveTo(start,start2);
ctx.lineTo(finish,finish2);
ctx.stroke();
ctx.closePath();

    Sinon, au lieu de dessiner uniquement la dernière ligne, tu vas en tirer toutes les lignes précédentes à nouveau, car le chemin d'accès ouvert est toujours le même, provoquant ainsi l'effet des lignes changent de couleur et largeur de ce que vous voyez est en fait de nouvelles lignes dessinées sur eux.