当前位置：文江博客话题详情

JavaScript HTML Canvas geometry clip

如何为 HTML5 Canvas 设置自定义剪切区域？

发布于 2024-11-29 21:59:07 字数 91 浏览 0 评论 0原文

我需要在一个减去一个圆的矩形上绘制。如果无法进行圆形裁剪，则多边形裁剪区域可能足以满足我的需要。

如何为 HTML5 Canvas 设置自定义剪切区域？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

没企图 2024-12-06 21:59:07

您应该阅读 Canvas 教程中的合成，它解释了如何绘制一个减去一个圆的矩形和类似的图形。

我认为您正在寻找 destination-out：

在此处输入图像描述

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle = "#09f";
    ctx.fillRect(15,15,70,70);

    ctx.globalCompositeOperation = 'destination-out';

    ctx.fillStyle = "#f30";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

查看其实际操作jsFiddle。

You should read Compositing in the Canvas tutorial, it explains how you draw a rectangle minus a circle and similar figures.

I think you are looking for destination-out:

enter image description here

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle = "#09f";
    ctx.fillRect(15,15,70,70);

    ctx.globalCompositeOperation = 'destination-out';

    ctx.fillStyle = "#f30";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

See it in action on jsFiddle.

回复收藏 0 原文

橘虞初梦 2024-12-06 21:59:07

您也可以使用“剪辑”和“清除”。类似这样的事情：

drawRectangle(ctx);
walkCirclePath(ctx);
ctx.clip();
ctx.clear();

但是抗锯齿不是这样工作的；

Also you can use "clip" and than - "clear". Something like that:

drawRectangle(ctx);
walkCirclePath(ctx);
ctx.clip();
ctx.clear();

But antialiasing dont work in such way;

回复收藏 0 原文

罪歌 2024-12-06 21:59:07

出色地。
这很难。

我发现绘制除圆圈之外的所有位置的最佳解决方案是

c.save();
c.beginPath();
c.moveTo(0, 0);
c.lineTo(x, 0);
c.arc(x, y, 75, - Math.PI / 2, Math.PI * 2 - Math.PI / 2, 1);
c.lineTo(x, 0);
c.lineTo(1000, 0);
c.lineTo(1000, 500);
c.lineTo(0, 500);
c.clip();
c.drawImage(window.tBitmap[0], x - 100, y - 100);
c.restore();

我不敢相信没有更好的解决方案。但它可以满足我的需要。

Well.
It was hard.

The best solution I found to draw every where except in a circle is

c.save();
c.beginPath();
c.moveTo(0, 0);
c.lineTo(x, 0);
c.arc(x, y, 75, - Math.PI / 2, Math.PI * 2 - Math.PI / 2, 1);
c.lineTo(x, 0);
c.lineTo(1000, 0);
c.lineTo(1000, 500);
c.lineTo(0, 500);
c.clip();
c.drawImage(window.tBitmap[0], x - 100, y - 100);
c.restore();

I can't believe taht there is not a better solution. But it's works for my need.

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文