切换画笔颜色 html5 canvas

Question

我正在尝试用两种不同颜色的画笔创建一个绘图板。您可以 select 通过单击相应的按钮来选择您想要的画笔。

注意：这只需要在 iOS Safari 上工作。

两把刷子是：

黄色荧光笔
纯色画笔

我面临的问题是 select 使用不同的画笔会改变 canvas 上现有画笔笔触的颜色。

我怎样才能让每个笔刷不影响另一个？

代码：

var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing;
var _highlight = false;


function marker(){
  ctx.lineWidth = 10;
 ctx.strokeStyle = 'rgba(0,0,0,1)';
}

function highlight(){
  ctx.lineWidth = 15;
  ctx.strokeStyle = 'rgba(255,255,0,0.4)';
  ctx.globalCompositeOperation = 'destination-atop';
}

document.getElementById("marker").addEventListener("click", function(){
  _highlight = false;
});

document.getElementById("clear").addEventListener("click", function(){
  ctx.clearRect(0, 0, el.width, el.height);
  ctx.restore();
  ctx.beginPath();
});


document.getElementById("highlight").addEventListener("click", function(){
  _highlight = true;
});

el.onmousedown = function(e) {
  isDrawing = true;
  if(_highlight){
  highlight();
   ctx.lineJoin = ctx.lineCap = 'round';
   ctx.moveTo(e.clientX, e.clientY);  
  }else{
    marker();
    ctx.lineJoin = ctx.lineCap = 'round';
   ctx.moveTo(e.clientX, e.clientY);
  }
};
el.onmousemove = function(e) {
  if (isDrawing) {
    if(_highlight){
      highlight();
     ctx.lineTo(e.clientX, e.clientY);
     ctx.stroke();  
    }else{
      marker();
      ctx.lineTo(e.clientX, e.clientY);
     ctx.stroke();
    }
    
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

canvas#c { 
  border: 1px solid #ccc;
  background:url(http://i.imgur.com/yf6d9SX.jpg);
  position: relative;
  left: 0;
  top: 0;
  z-index: 2;
}

<canvas id="c" width="930" height="500"></canvas>

<br>
<button id="marker">Marker</button>
<button id="highlight">Highlight</button>
<button id="clear">Clear</button>

Answer 1

您正在将所有线条累积到同一路径，因此每次您描边时，当前描边颜色将用于所有线条，包括之前的线条。

尝试在鼠标按下事件和换笔事件中添加 beginPath()。

还有其他几个问题虽然在此代码中未在此处解决，包括：

笔变化时的复合模式
鼠标位置必须修正为 canvas

（对于标记效果，您还可以使用新的混合模式 "multiply" 而不是 "destination-atop"，但在 IE 中不起作用）。

var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing;
var _highlight = false;

function marker() {
  ctx.lineWidth = 10;
  ctx.strokeStyle = 'rgba(0,0,0,1)';
  ctx.globalCompositeOperation = 'source-over';
}

function highlight() {
  ctx.lineWidth = 15;
  ctx.strokeStyle = 'rgba(255,255,0,0.4)';
  ctx.globalCompositeOperation = "multiply";
  if (ctx.globalCompositeOperation !== "multiply")     // use multiply if available
    ctx.globalCompositeOperation = 'destination-over'; // fallback mode
}

document.getElementById("marker").addEventListener("click", function() {
  _highlight = false;
});

document.getElementById("clear").addEventListener("click", function() {
  ctx.clearRect(0, 0, el.width, el.height);
  ctx.beginPath();
});


document.getElementById("highlight").addEventListener("click", function() {
  _highlight = true;
});

el.onmousedown = function(e) {
  var pos = getMouse(e);
  isDrawing = true;
  ctx.beginPath();
  _highlight ? highlight() : marker();
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(pos.x, pos.y);
};

el.onmousemove = function(e) {
  if (isDrawing) {
    var pos = getMouse(e);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

function getMouse(e) {
  var rect = el.getBoundingClientRect();
  return {x: e.clientX - rect.left, y: e.clientY - rect.top}
}

canvas#c {
  border: 1px solid #ccc;
  background: url(http://i.imgur.com/yf6d9SX.jpg);
  position: relative;
  left: 0;
  top: 0;
  z-index: 2;
}

<canvas id="c" width="930" height="500"></canvas>
<br>
<button id="marker">Marker</button>
<button id="highlight">Highlight</button>
<button id="clear">Clear</button>

切换画笔颜色 html5 canvas

Toggle brush colours html5 canvas

html

javascript

canvas