HTML5 Canvasがすべての行の色を変更します

HTML5キャンバスを使用した簡単な描画アプリケーションを作成しました。 2つの異なる位置をクリックすると、ある点から別の点に線を引くことができます。また、線の太さと色を変更できる2つのテキスト入力ボックスがあります。問題は、行の色を変更すると、それは変更されますすべて以前に描画された行。これは、線の太さを変更するときにも起こりますが、以前より太い線を描いた場合のみです（細い線を描くと他の線は変化しません）。HTML5 Canvasがすべての行の色を変更します

私はHTML5に新しいので、どんな助けでも大歓迎です。

<!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>

出典

2012-02-12 sc8ing

ただ、このように、あなたの線を引くclosePath()コール（同様にbeginPath）を追加します。それ以外の場合だけではなく、最新のラインを描く、あなたはすべてのつもり引き分けだ

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

開いているパスがまだ同じであるため、前の行もまた同じです。したがって、あなたが見ている行が、実際には新しい行が上に描画されているときに、色と幅を変更する行の効果を引き起こします。

出典

2012-02-12 18:57:42 Delta

それは働いた！どうもありがとう。 – sc8ing

HTML5 Canvasがすべての行の色を変更します

答えて

関連する問題