Question

我有一张带有地图的画布。我希望画布变暗，然后画布中的多边形变得透明（聚焦，因此不会变暗）。

我无法使多边形的透明度起作用。现在我用颜色填充多边形，但如何用透明颜色填充它？

我做错了吗？

canv = document.getElementById("canvas");
    ctx = canv.getContext("2d");
    image = document.getElementById('img_holder');
    ctx.drawImage(image,0,0, canv.width, canv.height);

ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
            ctx.fillRect(0, 0, 870, 500);
            ctx.restore();

ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100,50);
ctx.lineTo(100, 100);
ctx.lineTo(200, 150);
ctx.lineTo(10, 150);
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.closePath();
ctx.fill();

Link to my fiddle

Answer 1

要从透明叠加层剪切图像，您可以采用两种方式：

在绘制之前从矩形中剪切多边形
将图像绘制为多边形

使用您当前的设置，使用clip：

可以更轻松地完成后续设置

var canvas  = document.getElementById("canvas");
var ctx     = canvas.getContext("2d");
var image   = new Image;

image.addEventListener('load', function(){
  
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
  ctx.fillRect(0, 0, 870, 500);
  
  // Use save and restore to make sure the canvas restores its non-clipping path setup after clipping
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(100,50);
  ctx.lineTo(100, 100);
  ctx.lineTo(200, 150);
  ctx.lineTo(10, 150);
  ctx.closePath();
  // Use the path just created as a clipping path
  ctx.clip();
  // Draw anywhere in the image, only inside the clipping path will be drawn
  ctx.drawImage(image,0,0, canvas.width, canvas.height);
  // restore so you can draw outside the clipping path again
  ctx.restore();
  
});

image.src = 'http://www.marinadivenezia.it/media/467/w-876/h-506/00-MAPPA-2015-GENERICA.jpeg';

<canvas id="canvas" width="400" height="300"></canvas>

我还建议你为你的变量使用清晰的名字 - 几乎没有任何优势要求将画布缩短到canv，但这让它变得更加清晰。另外，请确保使用var关键字声明您的变量 - 这是常见的做法，与未声明它们略有不同，可能是错误的。

画布上的透明多边形

1 个答案: