gpt4 book ai didi

javascript - Canvas 上的透明多边形

转载 作者:行者123 更新时间:2023-11-30 16:15:22 24 4
gpt4 key购买 nike

我有一个带有 map 的 Canvas 。我希望 Canvas 变暗,然后 Canvas 中的多边形透明(聚焦,所以不会变暗)。

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

我做错了吗?

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

最佳答案

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

  • 画之前从矩形中剪出多边形
  • 将图像绘制成多边形

根据您当前的设置,使用 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>

我还建议您为变量使用清晰的名称 - 将 canvas 缩短为 canv 几乎没有任何优势,但它使它更加清晰。此外,请确保您使用 var 关键字声明您的变量 - 这是常见的做法,并且与不声明它们略有不同,可能存在错误。

关于javascript - Canvas 上的透明多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35601342/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com