我如何绘制具有一致不透明度的 canvas？

Question

我想在我的画笔中添加不透明度 program/app 所以我通过 ctx.globalAlpha 降低了不透明度顺便说一句我正在使用路径绘制。我得到了这样的东西：

片段（无绘图功能）；

//context
c = document.getElementById('c').getContext("2d");

//set opacity/alpha
c.globalAlpha = 0.5

//draw lines
c.beginPath();
c.lineWidth = 20;
c.lineCap = 'round';

c.moveTo(20,20);
c.lineTo(60,20);

c.stroke();
c.beginPath();

c.moveTo(60,20);
c.lineTo(70,50);

c.stroke();

<canvas id='c'></canvas>
<style>
canvas {
  border: 1px solid black;
}
</style>

这是一个picture of it

如您所见，它不是纯透明的颜色，您可以看到黑点（不好）。 那么我该如何解决那？

Answer 1

不要在每次移动后划水，这是一个有效的例子：https://codesandbox.io/s/nameless-shadow-rql9q

Answer 2

透明度是一致的，但是这个地方你涂了两次，所以它会累积。如果只在一条路径上有问题，则应反复调用moveTo/lineTo，最后才抚摸

不过我猜你想要的不止于此。解决方案是在屏幕外绘制 canvas。像这样初始化：

// your main canvas
var canvas = document.getElementById('c');
var c = canvas.getContext("2d");

// create an offscreen canvas: this canvas is not shown on screen
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
var oc = offscreenCanvas.getContext("2d");

然后 draw/update 这样：

// you are drawing to the offscreen canvas
oc.beginPath();
oc.lineWidth = 20;
oc.lineCap = 'round';
oc.moveTo(20,20);
oc.lineTo(60,20);
oc.stroke();
oc.beginPath();
oc.moveTo(60,20);
oc.lineTo(70,50);
oc.stroke();

// and then copy the offscreen canvas onto your main canvas with opacity
c.globalAlpha = 0.5;
c.drawImage(offscreenCanvas, 0, 0);

当您的用户操作完成后（例如，在中风或任何您需要的操作之后），您可以清除 oc 并开始一个新的操作。

这也是将同一图形的多个实例绘制到一个图形上的推荐方法 canvas：在屏幕外绘制一次 canvas，然后多次复制到主图形上。

更新：由于您要求 "with drawing functionality"，我使用另一个屏幕外 canvas 创建了一个工作绘图示例来存储用户操作之间的状态：

var canvas = document.getElementById('c');
var c = canvas.getContext("2d");

// create an offscreen canvas: this canvas is not shown on screen
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
var oc = offscreenCanvas.getContext("2d");

// create another offscreen "freeze canvas"
var freezeCanvas = document.createElement('canvas');
freezeCanvas.width = canvas.width;
freezeCanvas.height = canvas.height;
var fc = freezeCanvas.getContext("2d");

// for visualisation purposes you can also show these canvases
//canvas.parentNode.appendChild(offscreenCanvas);
//canvas.parentNode.appendChild(freezeCanvas);

var w = 10;

var le = null;
canvas.addEventListener("mousedown", e => {
  le = e;
  sw = w;

  // at the start of a stroke clear the offscreen canvas
  oc.clearRect(0, 0, canvas.width, canvas.height);
}, false);

canvas.addEventListener("mousemove", e => {
  if (!le) return;
  
  // some primitive dynamic stroke width calculation
  var dx = e.offsetX - le.offsetX;
  var dy = e.offsetY - le.offsetY;
  var d = Math.max(1, Math.sqrt(dx*dx+dy*dy));
  sw = sw * 0.9 + (w * 4 / d) * 0.1;

  // add to your stroke image
  oc.beginPath();
  oc.lineWidth = sw;
  oc.lineCap = 'round';
  oc.moveTo(le.offsetX, le.offsetY);
  oc.lineTo(e.offsetX, e.offsetY);
  oc.stroke();
  le = e;

  // and then combine the frozen contents with the stroke
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.globalAlpha = 1;
  c.drawImage(freezeCanvas, 0, 0);
  c.globalAlpha = 0.5;
  c.drawImage(offscreenCanvas, 0, 0);
}, false);

canvas.addEventListener("mouseup", e => {
  le = null;

  // and freeze the main canvas
  fc.clearRect(0, 0, canvas.width, canvas.height);
  fc.drawImage(canvas, 0, 0);
}, false);

<canvas id='c'></canvas>
<style>canvas { border: 1px solid black; }</style>

我如何绘制具有一致不透明度的 canvas？

how do i draw in a canvas with consistent opacity?

html

javascript

canvas

opacity