可以操纵HTML5 Canvas CLearRect（）使其看起来像箭头吗？

作者: 子阳
发布时间: 2025-01-13 06:10:43 (22天前)
转自：

3 条回复

0#
回复此人
夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以像在其他地方一样绘制多边形。 </p> <P> 更换： </p> <pre> <code> ctx.clearRect(290, 150, 80, 250); </code> </pre> <P> 有： </p> <pre> <code> // Arrow-up shape: ctx.beginPath(); ctx.moveTo(320, 150); ctx.lineTo(420, 250); ctx.lineTo(360, 250); ctx.lineTo(360, 400); ctx.lineTo(280, 400); ctx.lineTo(280, 250); ctx.lineTo(220, 250); ctx.closePath(); ctx.fillStyle = "white"; ctx.stroke(); ctx.fill(); </code> </pre> </DIV>

编辑
1#
回复此人
生如夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 虽然另一个答案适用于您的情况，但在某些情况下，某人可能希望清除路径而不是仅仅填写它 - 为此， <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation" rel="nofollow noreferrer"> globalCompositionOperation </A> 属性可以使用： </p> <pre> <code> ctx.beginPath(); //draw path to clear here ctx.globalCompositionOperation = "destination-out"; ctx.fill(); ctx.globalCompositionOperation = "source-over"; </code> </pre> <P> 这将告诉浏览器清除画布上的指定路径而不是填充它。将此属性设置为 <code> source-over </code> 然后操作将恢复默认的绘制模式。 </p> </DIV>

编辑

登录后才能参与评论