JavaScript实现Canvas圆形橡皮擦

最新推荐文章于 2025-05-13 11:47:19 发布

程序梦想征途

最新推荐文章于 2025-05-13 11:47:19 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/DevProZ/article/details/133405401

编程专栏收录该内容

408 篇文章 ¥29.90 ¥99.00

订阅专栏

本文介绍了如何利用JavaScript在HTML5 Canvas上实现圆形橡皮擦功能。通过获取Canvas元素，设置绘图上下文，监听鼠标移动事件并绘制圆形路径，实现了在Canvas上擦除内容的效果。完整代码示例可供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Canvas是HTML5中的元素，用于通过脚本绘制图形。在Canvas上使用JavaScript可以实现各种绘图和图形操作。本文将介绍如何使用JavaScript在Canvas上实现圆形橡皮擦功能。

首先，我们需要在HTML文件中创建一个Canvas元素，并为其指定一个唯一的id，以便在JavaScript中引用它。以下是一个简单的Canvas元素：

<canvas id="myCanvas" width="500

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序梦想征途

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

canvas擦除功能—圆形橡皮擦

weixin_44434938的博客

03-26

2093

canvas擦除功能—圆形橡皮擦

在css中怎么做橡皮擦,js 实现橡皮擦 擦图效果(可用于刮刮卡)

weixin_39983383的博客

08-03

671

【实例简介】【实例截图】【核心代码】Documentbody{margin:0;padding:0;}.box{position: absolute;left:0;top:0;bottom:0;right: 0;background:url("girl1.jpg") no-repeat;background-size: 100% 100%;backface-visibility: hidden;o...

参与评论您还未登录，请先登录后发表或查看评论

js canvas实现橡皮擦效果

10-17

主要为大家详细介绍了使用Canvas实现橡皮擦效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

打造移动端Canvas涂鸦应用：从基础到高级功能

最新发布

weixin_31459297的博客

05-13

620

Canvas是HTML5中引入的新的绘图元素，通过JavaScript中的Canvas API可以绘制图形、动画以及游戏。它是一个通过HTML标签定义的矩形区域，你可以在这个区域中绘制任何内容。

JS 实现橡皮擦除图片换图

07-31

JS 实现橡皮擦除图片换图

【html本地工具】html+JS实现一个超好看的绘画板/涂鸦板，带画笔、矩形、圆形、直线、文本、橡皮擦，有撤销、恢复、保存功能

weixin_43165220的博客

08-01

4218

自己写的一个本地绘画板工具，有以下功能：自由画笔、矩形、圆形、直线、文本输入、画笔和橡皮擦调整大小粗细、调整画笔颜色、橡皮擦、保存为图片、撤销、恢复（反撤销）。功能还是挺完善的。

canvas实现橡皮擦效果擦去图片上的文字

qq_17859117的博客

04-01

1257

PS：网上有很多资料，但要么是不全，要么是存在一些错误，这里提供一个一键复制完整版。canvas实现橡皮擦效果擦去图片上的文字。

基于canvas剪辑区域功能实现橡皮擦效果

09-20

本教程将深入探讨如何利用Canvas的剪辑区域（clip()）功能来实现橡皮擦效果，这对于创建交互式绘图应用或在线编辑器非常有用。首先，我们需要在HTML文档中创建一个Canvas元素，并为其设置合适的样式。以下是一个...

用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

09-28

具体实现橡皮擦功能时，首先需要在HTML文档中插入一个canvas元素，并在JavaScript中获取对应的Canvas对象和其2D渲染上下文（Context）。完成这些基本设置后，我们就可以通过调用context对象的绘图方法来绘制各种图形...

canvas--橡皮擦

艾夏SEO

12-05

2495

Document *{ margin: 0; padding: 0; } #box{ width: 500px; height: 500px; border: 1px solid red; posit

jquery橡皮擦插件使用图片适配屏幕大小

sally820的博客

10-21

462

一.首先要导入橡皮擦插件，因为插件是基于jquery的是，所以要在导入插件之前导入jquery 二.js代码，插件中有好几个方法，这里用到其中之一，当擦出后的比率大于40%时自动清除干净 $(function(){ $('#redux').eraser({ progressFunction: function(p){ if(Math.round(p*100) >

【html5 canvas】使用Canvas做出橡皮擦效果分类： HTML...

weixin_30773135的博客

12-30

739

html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, minimum-...

HTML+CSS+JS实现canvas仿ps橡皮擦刮卡效果

java李阳勇的博客

10-21

1025

效果演示：文末获取源码主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div> <script type="text/javascript" charset="utf-8"> var canvas = document.getElementById("..

canvas drawbitmap不出现_「原创」徒手撸浏览器 Canvas 涂鸦白板 - 实现圆形橡皮擦...

weixin_29672983的博客

12-29

247

众所周知，Canvas 清除画布内容的 API 是 clearRect 方法，且调用该方法清除的是矩形区域。日常中，用的更多的却是圆形区域的橡皮擦。擦除效果要实现圆形效果的橡皮擦，就不得不提 Canvas API 中的 clip 裁剪方法了，实现的方案就是根据尺寸大小，绘制相应的圆(arc)，接着将这部分内容裁剪，在裁剪的区域内，执行 clearRect 方法，清除掉整个裁剪区域，不影响主屏...

Canvas剪辑区域-橡皮擦&不断变小的动画15

编程是一门实践技术

05-20

206

剪辑区域-橡皮擦&不断变小的动画15。

vue项目使用canvas画图实现canvas带背景的橡皮擦 canvas转base64 canvas转file文件方法

蒲公英芽的博客

11-01

8528

用户手动在画板上进行绘制图案，绘制完成后，将绘制好的作品上传到服务器。涉及到的功能点： 1. 项目的运行环境是在手机端，canvas 的尺寸单位是px，需要做好不同设备的适配。 2. 选择画笔颜色、大小后，笔触要跟随手指的移动画出图案。 3. 画板的橡皮擦功能，带有背景图片的canvas，实现橡皮擦功能。 4.canvas的一键清除画布功能。 5. 上传图片到服务器，将用户画好的作品上传到服务器。

【绘制】HTML5 Canvas绘画画板小项目——橡皮擦（圆形和方形）

苏一恒

09-26

2010

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy 介绍本节的橡皮擦的实现原理依然是用上一节的剪辑区域的原理，并且丰富了整个橡皮擦的应用。在线演示详细代码 ...

使用 canvas 画矩形，实现橡皮擦功能

lefex的博客

08-11

1855

在画图之前，需要了解「画布的坐标系」，它的左上角坐标为（0，0），为原点，一图胜前言，关于坐标系的深入理解，看今天的的第二篇文章：canvas 只提供了两种绘制图形的 API，一种是矩形，...

canvas实现涂鸦效果--橡皮檫和历史记录

King博客

03-28

7221

利用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。由于篇幅问题，本文主要实现橡皮檫和历史记录功能，该部分功能不操作背景图片，最终效果如下图。 Tips：本文是在《canvas实现涂鸦效果--基本涂鸦效果》、《canvas实现涂鸦效果--大小颜色背景图》和《canvas实现涂鸦效果--清屏和保存功能》基础上添加功能。橡...