在超文本标记语言<canvas>上绘制“负空间”
在超文本标记语言<canvas>上绘制“负空间”
提问于 2011-04-05 10:08:37
我想画一个实心的黑色矩形，在它上面有一个圆孔，背景图像通过这个孔是可见的。有什么简单的方法可以做到这一点吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-04-05 10:53:30
我不知道这是不是最好的方式，但它可以在Chrome上工作。设置
ctx.globalCompositeOperation = "xor";然后画一个圆，然后在上面画一个矩形。然后，圆将与矩形抵消(xor)，并变得透明。
Stack Overflow用户
发布于 2013-02-21 13:01:09
绘制外部形状与路径，又名moveTo，lineTo等。然后在该形状内部绘制负形状，但方向相反顺时针/逆时针。然后调用fill()。
下面是一个绘制带有圆孔的圆的示例。
<html><head></head><body>
<canvas id="canvas" width=600 height=600></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var width = canvas.width, height = canvas.height;
var context = canvas.getContext("2d");
// draw a diagonal line just to demonstrate the transparency later
context.beginPath();
context.moveTo(width/2 - height/2, 0);
context.lineTo(width/2 + height/2, height);
context.lineWidth = 3;
context.strokeStyle = "#0f0";
context.stroke();
// draw a circle with a hole in it
context.beginPath();
context.arc(width/2, height/2, height*3/8, 0, 2*Math.PI);
context.arc(width/2, height/2, height*1/8, 0, 2*Math.PI, true);
context.fillStyle = "#555";
context.fill();
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5546396
复制相关文章
相似问题
腾讯云开发者
