javascript - HTML5 canvas globalAlpha无法正常工作

我需要使用没有clearRect方法的透明透明透明线条绘制线条，尝试使用：globalAlpha和strokeStyle与rgba像这样：

ctx.strokeStyle = "rgba( redChannel, greenChannel, blueChannel, AlphaChannel )";

但是两种方法都没有用。我如何在没有clearRect方法的情况下绘制透明线。虽然我在每个图纸clearRect工作之前都使用globalAlpha，但是我需要没有它的工作。

我的代码示例：

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.globalAlpha = "0.2";
//ctx.strokeStyle = "rgba(255, 0, 0, 150)";
ctx.strokeStyle = "red";

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  points.push({ x: e.clientX, y: e.clientY });

  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (var i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.stroke();
  ctx.closePath();

};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};

canvas { border: 1px solid #ccc }

<canvas id="c" width="500" height="300"></canvas>

最佳答案

每次鼠标移动时，您都将重绘整个路径，因此即使globalAlpha值设置为0.2，分层效果也会使线条看起来很坚实。

选项1：
使用clearRect清除路径onmousemove然后重绘；

选项2：
仅绘制路径的最后一段，但是可见重叠：

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.globalAlpha = "0.2";
//ctx.strokeStyle = "rgba(255, 0, 0, 150)";
ctx.strokeStyle = "red";

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  points.push({ x: e.clientX, y: e.clientY });

  ctx.beginPath();

  //draw just the last segment
  if(points.length>1) {
      ctx.moveTo(points[points.length-2].x, points[points.length-2].y);
      ctx.lineTo(points[points.length-1].x, points[points.length-1].y);
  }
  ctx.stroke();
  ctx.closePath();

};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};

canvas { border: 1px solid #ccc }

<canvas id="c" width="500" height="300"></canvas>

选项3：
设置canvas元素的不透明度

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
//ctx.globalAlpha = "0.2";
//ctx.strokeStyle = "rgba(255, 0, 0, 150)";
ctx.strokeStyle = "red";

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  points.push({ x: e.clientX, y: e.clientY });

  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (var i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.stroke();
  ctx.closePath();

};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};

canvas { border: 1px solid #ccc; opacity:0.2; }

<canvas id="c" width="500" height="300"></canvas>