在畫布上用不透明度（點線）進行繪制

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開始）。

驗證的概念

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

 #draft {cursor:crosshair} .sandwich {position:relative} .sandwich>canvas {position:absolute;left:0;top:0} 

 <div class="sandwich"> <canvas id="main" width=600 height=600></canvas> <canvas id="draft" width=600 height=600></canvas> </div>