在画布上绘制不透明度（点线）javascript [英] Drawing on canvas with opacity (dots in line) javascript

问题描述

我有绘图逻辑：

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事件。

When i set the globalAlpha to set opacity in this code a see dots in my drawn line. This logic is attached to mosemove event.

推荐答案

是的，这是预期的，因为每一行都在连接点透支，并且他们的alpha数据会加起来。

Yes, that is to be expected as each line is overdrawn at the connection points, and their alpha data will add up.

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

I would suggest the following approach and attach a proof-of-concept demo at the end, feel free to adopt that code to your project:

1. 在顶部创建两个画布，一个主画布和一个草稿


2. 直接设置alpha在顶部元素上使用CSS（不透明度）并始终保持 globalAlpha = 1


3. 对于每个笔划（笔下，笔向上）绘制在草稿画布上（在每个点之间使用线条）


4. 在画布上，在主画布上设置 globalAlpha 等于顶部画布的CSS不透明度


5. 使用 drawImage（）将顶部画布绘制到主画布。


6. 清除顶部画布，吃，睡，重复（从3开始）。

1. Create two canvases, one main and one draft on top
2. Set the alpha directly on the top element using CSS (opacity) and always keep globalAlpha=1
3. For each stroke (pen down, pen up) draw on draft canvas (use lines between each point)
4. On pen up, set globalAlpha on main canvas equal the CSS opacity of top canvas
5. Draw top canvas to main canvas using drawImage().
6. Clear top canvas, eat, sleep, repeat (from 3).

概念验证

Proof-of-concept

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>

这篇关于在画布上绘制不透明度（点线）javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！