帆布上的透明多边形

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

我无法获得多边形的透明度。现在我用一种颜色填充多边形，但如何用透明颜色填充多边形？

我做错了吗？

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

来源

2016-02-24 Andreas Baran

为什么使用'ctx.globalCompositeOperation'绘制透明形状？你简单的'fillStyle = rgba'应该可以做到这一点......如果你需要绘制一个透明的图像，'globalCompositeOperation'是有用的，但是填充一个形状很容易，就像'fillStyle'一样... – somethinghere

@somethinghere - 我很喜欢新的画布，所以也许我误解了你的答案 - 但这是你的意思吗？ http://jsfiddle.net/Sykvr/142/。这剂量使多边形完全透明。我希望它能像真正的照片一样成为父母，而不需要黑色调光器覆盖。也许我误解了它的工作原理。 –

您是否试图从黑色透明覆盖层中删除多边形？ – somethinghere

要从透明覆盖切出的图像，你可以去两种方式：

从矩形切出多边形绘图
绘制图像到前多边形

随着您目前的设置，后者是更容易实现使用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>

我也建议你使用明确的名称为您的变量 - 有几乎没有任何advntage缩短画布canv，但它使赫克更清晰。另外，请确保你用var关键字声明了你的变量 - 这是很常见的做法，它与声明它们稍有不同，可能是错误的。

来源

2016-02-24 12:38:46 somethinghere

非常感谢！我也创建了这个解决方案 - http://jsfiddle.net/eGjak/2736/，但我不知道它是否是正确的方法，但它似乎工作:-)但我会用你的，非常感谢： - ） –

@AndreasBaran是我还是那张贴的小提琴只是覆盖整个透明黑色？这似乎并不奏效。这种方法可以工作，但是你需要将图像的所有四个角连接到切口，以确保形状实际上是矩形减去你的多边形，然后填充它......但是这听起来比'clip'更复杂， :) – somethinghere

你说得对 - 我会坚持你的解决方案。再次感谢：-） –

帆布上的透明多边形

回答

相关问题