Question

我正在尝试使用两种不同的颜色画笔创建绘图板。您可以通过单击相应的按钮选择所需的画笔。

注意：这只需要在iOS Safari上运行。

两把刷子是：

黄色荧光笔
纯色画笔

我面临的问题是选择不同的画笔，改变画布上现有画笔笔划的颜色。

如何让每个画笔不影响另一个？

代码：

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()。

此代码中还有其他一些问题，包括：

笔更改时的复合模式
必须将鼠标位置更正为画布的相对位置

（对于标记效果，您也可以使用新的混合模式＆＃34;乘以＆＃34;而不是＆＃34; destination-atop＆＃34;，但在IE中不起作用。）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

切换画笔颜色html5画布

1 个答案: