在画布上绘制不透明度（点线）javascript

Question

我有绘图逻辑：

Draw = function(canvas, ctx, mousePosition) {

    var grad = ctx.createLinearGradient(0, 0, canvas[0].width, 0);
    grad.addColorStop(0, currentLineColor);
    grad.addColorStop(1, currentLineColor);

    ctx.lineWidth = currentLineWidth;
    ctx.strokeStyle = grad;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.globalAlpha = 0.4;

    ctx.beginPath();
    ctx.moveTo(lastMousePosition.x, lastMousePosition.y);
    ctx.lineTo(mousePosition.x, mousePosition.y);
    ctx.stroke();
};

当我将globalAlpha设置为在此代码中设置不透明度时，请在我绘制的线条中查看点。这个逻辑附加到mosemove事件。

Answer 1

是的，这是预期的，因为每条线在连接点都是透支的，并且它们的alpha数据会相加。

我建议采用以下方法并在最后附加一个概念验证演示，随意将该代码应用于您的项目：

1. 在顶部创建两个画布，一个主画面和一个画面
2. 使用CSS（不透明度）直接在顶部元素上设置alpha，并始终保持globalAlpha=1
3. 对于每个笔划（笔下，笔向上）在草稿画布上绘制（使用每个点之间的线条）
4. 在笔上，在主画布上设置globalAlpha等于顶部画布的CSS不透明度
5. 使用drawImage()将顶部画布绘制到主画布。
6. 清除顶部画布，吃饭，睡觉，重复（从3开始）。

证明的概念

＆＃13;
＆＃13;
var draft = document.getElementById("draft");
var main = document.getElementById("main");
var ctx = draft.getContext("2d");
var mctx = main.getContext("2d");
var isDown = false, prev, alpha = 0.4;

// setup pen
ctx.strokeStyle = "rgb(0,200,127)";
ctx.lineWidth = 16;
ctx.lineCap = "round";                              // important to make lines cont.

// set up alpha
draft.style.opacity = alpha;                        // CSS alpha for draft
mctx.globalAlpha = alpha;                           // context alpha for main

draft.onmousedown = function(e){
  isDown = true; 
  prev = getXY(e);                                  // set prev. point as start
};

window.onmousemove = function(e){
  if (!isDown) return;
  var point = getXY(e);
  ctx.beginPath();                                  // new path
  ctx.moveTo(prev.x, prev.y);                       // start at prev. point
  ctx.lineTo(point.x, point.y);                     // line to new point
  ctx.stroke();                                     // stroke
  prev = point;                                     // update prev. point
};

window.onmouseup = function(){
  isDown = false;                                   // when up:
  mctx.drawImage(draft, 0, 0);                      // copy drawing to main
  ctx.clearRect(0, 0, draft.width, draft.height);   // clear draft
};

function getXY(e) {
  var r = draft.getBoundingClientRect();
  return {x: e.clientX - r.left, y: e.clientY - r.top}
}
＆＃13;
#draft {cursor:crosshair}
.sandwich {position:relative}
.sandwich>canvas {position:absolute;left:0;top:0}
＆＃13;
<div class="sandwich">
  <canvas id="main" width=600 height=600></canvas>
  <canvas id="draft" width=600 height=600></canvas>
</div>
＆＃13;
＆＃13;
＆＃13;