更改筆觸顏色

打然後我想改變行程的顏色，當我點擊一個顏色選擇

$("button").click(function() 
{ 
    console.log("click"); 
    stroke_color = "#0000FF"; 
});

會發生什麼情況是，如果在畫布上點擊一下，我會看到新的顏色，但是如果我開始移動鼠標來製作一條線，那麼筆畫的顏色就是我首先定義的顏色。

如何動態更改顏色？

這裏給fiddle鏈接操作（雖然我沒有做它的工作）

HTML

<button> 
change color! 
</button> 
<div id="main"> 
    <canvas id="canvas"></canvas> 
</div>

var stroke_color = "#FF0000"; 

    $("button").click(function() 
    { 
    console.log("click"); 
    stroke_color = "#0000FF"; 
    }); 

    var canvas = document.querySelector('#canvas'); 
    var ctx = canvas.getContext('2d'); 

    var sketch = document.querySelector('#main'); 
    var sketch_style = getComputedStyle(sketch); 
    canvas.width = parseInt(sketch_style.getPropertyValue('width')); 
    canvas.height = parseInt(sketch_style.getPropertyValue('height')); 


    // Creating a tmp canvas 
    var tmp_canvas = document.createElement('canvas'); 
    var tmp_ctx = tmp_canvas.getContext('2d'); 
    tmp_canvas.id = 'tmp_canvas'; 
    tmp_canvas.width = canvas.width; 
    tmp_canvas.height = canvas.height; 

    sketch.appendChild(tmp_canvas); 

    var mouse = {x: 0, y: 0}; 
    var last_mouse = {x: 0, y: 0}; 

    // Pencil Points 
    var ppts = []; 

    /* Mouse Capturing Work */ 
    tmp_canvas.addEventListener('mousemove', function(e) { 
     mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
     mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
    }, false); 


    /* Drawing on Paint App */ 
    tmp_ctx.lineWidth = 5; 
    tmp_ctx.lineJoin = 'round'; 
    tmp_ctx.lineCap = 'round'; 
    tmp_ctx.strokeStyle = stroke_color; 
    tmp_ctx.fillStyle = stroke_color; 

    tmp_canvas.addEventListener('mousedown', function(e) { 
     tmp_canvas.addEventListener('mousemove', onPaint, false); 

     mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
     mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 

     ppts.push({x: mouse.x, y: mouse.y}); 

     onPaint(); 
    }, false); 

    tmp_canvas.addEventListener('mouseup', function() { 
     tmp_canvas.removeEventListener('mousemove', onPaint, false); 

     // Writing down to real canvas now 
     ctx.drawImage(tmp_canvas, 0, 0); 
     // Clearing tmp canvas 
     tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 

     // Emptying up Pencil Points 
     ppts = []; 
    }, false); 

    var onPaint = function() { 

     // Saving all the points in an array 
     ppts.push({x: mouse.x, y: mouse.y}); 

     if (ppts.length < 3) { 
      var b = ppts[0]; 
      tmp_ctx.beginPath(); 
      //ctx.moveTo(b.x, b.y); 
      //ctx.lineTo(b.x+50, b.y+50); 
      tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth/2, 0, Math.PI * 2, !0); 
      tmp_ctx.fill(); 
      tmp_ctx.closePath(); 

      return; 
     } 

     // Tmp canvas is always cleared up before drawing. 
     tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 

     tmp_ctx.beginPath(); 
     tmp_ctx.moveTo(ppts[0].x, ppts[0].y); 

     for (var i = 1; i < ppts.length - 2; i++) { 
      var c = (ppts[i].x + ppts[i + 1].x)/2; 
      var d = (ppts[i].y + ppts[i + 1].y)/2; 

      tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d); 
     } 

     // For the last 2 points 
     tmp_ctx.quadraticCurveTo(
      ppts[i].x, 
      ppts[i].y, 
      ppts[i + 1].x, 
      ppts[i + 1].y 
     ); 
     tmp_ctx.stroke(); 

    };

來源

2016-02-13 Matías Cánepa

設置筆觸樣式改變了一切的顏色，你事後抽獎。

但是，在您的應用程序中，您將所有座標存儲在一個數組中，並且當用戶進行更改時，您將刪除圖像並重新繪製所有存儲的點。

我建議您在添加它們時將當前顏色與座標一起存儲。

ppts.push({x: mouse.x, y: mouse.y, color:stroke_color});

然後在for循環中設置tmp_ctx.strokeStyle存儲於該點的顏色，你畫線之前你的OnPaint功能：

for (var i = 1; i < ppts.length - 2; i++) { 
     var c = (ppts[i].x + ppts[i + 1].x)/2; 
     var d = (ppts[i].y + ppts[i + 1].y)/2; 

     tmp_ctx.strokeStyle = ppts[i].color; 
     tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d); 
    }

來源

2016-02-13 23:25:08 Philipp

更改筆觸顏色

回答

相關問題