如何使用CSS剪切路径剪切画布? [英] How to clip canvas with CSS clip-path?

问题描述

我知道我可以通过使用 getContext('2d')创建路径并设置 globalCompositeOperation 来裁剪画布.

我注意到有时候我可以使用 -webkit-clip-path 或 clip-path 在其他浏览器上裁剪画布(在Chrome上)，有时我无法:

使用此HTML:

<画布width ="300" height ="60"></canvas>

和CSS:

画布{-webkit-clip-path:多边形(50％33％，75％10％，80％80％，60％75％，40％60％，20％10％，40％20％，50％33％);
}

产生此:

这似乎是正确的.

但是，我注意到，如果我更改画布的高度，它将无法剪切:

<画布width ="300" height ="250"></canvas>

产生:

我的假设是，它在裁剪浮点数时存在问题(百分比在像素之间而不是在像素之间裁剪)，但是从百分比到像素坐标的更改不会裁剪.

*这里分别是其jsfiddle页面的链接:

• (在进行绘制操作之前，将剪辑设置为 ).

  只需将绘图操作放在一个函数中，当调整窗口大小时也可以调用该函数(如上面的演示所示).

  更新

  关于抗锯齿:实际上对图像应用了 抗锯齿，但是由于红色，根据可能很难检测到>屏幕类型，也许浏览器.放大版本:

  I know that I can clip a canvas by creating a path with getContext('2d') and setting globalCompositeOperation.

  I've noticed that sometimes I'm able to clip a canvas with -webkit-clip-path, or clip-path on other browsers (I'm on Chrome), and sometimes I'm not able to:

  Using this HTML:

  <canvas width="300" height="60"></canvas>

  and CSS:

  canvas { -webkit-clip-path: polygon(50% 33%, 75% 10%, 80% 80%, 60% 75%, 40% 60%, 20% 10%, 40% 20%, 50% 33%);
}

  produces this:

  Which appears to be correct.

  However, I've noticed that if I change the height of the canvas, it fails to clip:

  <canvas width="300" height="250"></canvas>

  produces:

  My assumption was that it has a problem clipping on floating points (where the percentages clip between pixels instead of on pixels), but changing from percents to pixel coordinates doesn't clip.

  *Here are links to their jsfiddle pages respectively:

  • http://jsfiddle.net/bozdoz/hMTgc/
  • http://jsfiddle.net/bozdoz/5H2Y2/

  Does anyone know why one works but the other doesn't?

  Is there a stable way to clip canvas elements with CSS, or do I need to use the canvas context methods?

  The reason I ask is that I'd like to use less js where possible. I have a string of coordinates which I can easily put into css; whereas, to use the ctx.beginPath()...ctx.moveTo()...ctx.lineTo()...ctx.lineTo()... method I'll need to do a for loop for the points.

  Also, I'm very curious as to why the first example worked, if anyone can explain that. Thanks! :)

  解决方案

  The clip-path is relative new and could be prone to errors (didn't work for me in Aurora).

  For a stable result I would suggest just using canvas' clip() method (you don't need composite for this).

  You can provide the points in this way (here percentages):

  var path = [50, 33, 75, 10, 80, 80, 60, 75, 40, 60, 20, 10, 40, 20, 50, 33];
  

  Almost as easy as defining in CSS. Then have a function to parse it:

  function addClip(context, path) {
  
      var w = context.canvas.width,
          h = context.canvas.height;
  
      context.beginPath();
      context.moveTo(path[0] * w / 100, path[1] * h / 100);
      for(var i = 2; i < path.length; i+=2) {
          context.lineTo(path[i] * w / 100, path[i+1] * h / 100);
      }
      context.closePath();
      context.clip();
  }
  

  Result:

  DEMO HERE

  (The clip is set before the drawing operations take place).

  Just put your drawing operations in a function which you can call when window is re-sized as well (shown in demo above).

  Update

  As to anti-alias: there is actually applied anti-alias to the image but because of the red color it can be hard to detect it depending on type of screen and perhaps browser. An enlarged version:

  这篇关于如何使用CSS剪切路径剪切画布?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！