Canvas的擦除操作（八）

最新推荐文章于 2024-04-05 18:35:31 发布
最新推荐文章于 2024-04-05 18:35:31 发布
阅读量2.3k 收藏 2
点赞数 1
分类专栏： HTML5之Canvas高速入门 HTML5之Canvas高速入门 文章标签： canvas context.attr context.clearRect 擦除函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22520215/article/details/84922588
版权

Canvas的擦除主要用于你画错了，可以重新擦掉，或者清除。

 

擦除函数

context.clearRect(x,y，width，height)
参数x，y表示擦除的远点坐标，
width表示擦除矩形的宽，
height则表示高

现在画个圆，然后把圆的下半部分擦掉，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" >$(document).ready(function(){
        var  canvas = $("#myCanvas");
        var  context = canvas.get(0).getContext("2d");

        context.fillStyle = "#12ad31";
        context.beginPath();
        context.arc(200,200,100,0,Math.PI*2,true);
        context.closePath();
        context.fill();   <!-- 绘制一个圆-->

        context.clearRect(100,200,200,100);<!-- 计算得出需擦除的矩形原点为（100，200），宽200，高100-->


    })</script>
</head>
<body>

    <canvas id="myCanvas" width="500" height="500" style="background-color: #112233">
        <!-- no no no no -->
    </canvas>

</body>
</html>

效果图：

这里提醒一下，如果想清除整个Canves，但有不知道Canves的尺寸，可以用下面的方法，即参数width、height传入Canves的尺寸，尺寸函数为canves.width();与canves.height();

即代码：

 context.clearRect(0,0,canvas.width(),canvas.height());

自己可以试试，结果是什么都没有了！

重置函数

上面的擦除函数只是擦除区域内的东西，对Canves其他部分没有任何影响，包括样式；而重置函数是将canves完全重置，把偶哦样式等，恢复到原始状态；

        canvas.attr("width",canvas.width());
        canvas.attr("height",canvas.height());
        这2个其实重置canvas宽和高的操作，所以所有东西都会重置！

下面给个测试代码，

先画个圆，然后擦除函数或重置函数，再画个矩形。

1、代码如下：


        context.fillStyle = "#12ad31";
        context.beginPath();
        context.arc(200,200,100,0,Math.PI*2,true);
        context.closePath();
        context.fill();   <!-- 绘制一个圆-->

        context.clearRect( 0, 0, canvas.width(), canvas.height());

        context.fillRect(100,100,100,200);

 

使用context.clearRect函数，我们发现 矩形的颜色与圆的颜色一样；

 

2、代码如下：

        context.fillStyle = "#12ad31";
        context.beginPath();
        context.arc(200,200,100,0,Math.PI*2,true);
        context.closePath();
        context.fill();   <!-- 绘制一个圆-->

        canvas.attr("width",canvas.width());
        canvas.attr("height",canvas.height());

        context.fillRect(100,100,100,200);

 

使用context.attr函数，我们发现 矩形的颜色是默认颜色；说明样式都被重置了！

 

 

 

 

 

 

airX嵌入式（微信公众号同名）
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 擦除动画_用HTML5 Canvas 做擦除及扩散效果
weixin_31530761的博客
01-14 676
2013年的时候曾经使用canvas实现了一个擦除效果的需求，即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果。好在2012年的时候学习HTML5的时候研究过canvas了，所以在比较短的时间内实现了一个方案【下文方案一】，后来继续探索之后进一步更新了这个方案【下文方案二】，提高了交互的性能，也提升了用户体验。今年初的另一个项目，提出了一个比较类似的需求，不过不是擦除效果，需要在一张地图上动...
canvas 擦除动画_canvas实现的擦除效果
weixin_28950543的博客
01-14 690
嗯，好久没有写博客了，因为较长一段时间发生了点点变故：楼主从传统IT项目(OA)跳到了移动端，主要搞微信上的web开发，也是学习了很长一段时间。言归正传，微信上常见的手指滑动扣个圈圈，然后显示底层图片的应用相信大家也见过不少了。包括微信自身之前也出过付款看图片的应用，也是分分钟刷爆朋友圈。这里，楼主分两个模块从技术上讲解该功能，知道怎么做的可以直接跳过第一部分。firstBlood，clip的应用...
使用canvas实现擦除效果
weixin_30485799的博客
04-19 384
w3c关于canvas的定义： HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 html代码: <div class="container"> ...
清除canvas画布内容(点擦除+线擦除)
11-20
清空canvas画布内容 1、重置宽或高 由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：（此方法仅限需要清除全部内容的情况） var c=document.getElementById("myCanvas"); c.width=c.width; 2、clearRect var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,5
两张图片实现擦除效果(canvas)
liulang68的博客
04-06 786
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> <title>橡皮擦效果</ti
js canvas实现擦除动画
10-21
总结一下，实现JS Canvas擦除动画的关键点包括： 1. 使用Canvas的`globalCompositeOperation`属性，设置为`destination-out`来实现擦除效果。 2. 绘制圆形或线条，并填充为透明，以模拟擦除动作。 3. 利用`...
WPF Canvas 效果 擦除效果
05-12
如果我们希望用户能够通过鼠标操作来擦除，我们需要监听`MouseLeftButtonDown`、`MouseLeftButtonUp`和`MouseMove`事件。在这些事件的处理程序中，我们可以根据鼠标位置更新`OpacityMask`，从而实现交互式的擦除...
Android 自定义画布canvas 实现绘制和清空画布功能
10-21
使用Canvas提供的方法进行绘图操作，例如： ```java canvas.drawRect(0, 0, 100, 100, paint); // 绘制矩形 canvas.drawCircle(50, 50, 30, paint); // 绘制圆 canvas.drawLine(10, 10, 90, 90, paint); // ...
电脑端的canvas 画板
12-15
7. **事件处理**：在canvas画板中，通常需要监听鼠标移动（`mousemove`）、点击（`mousedown/mouseup`）和释放（`mouseup`）事件，以便在合适的时候执行绘制、擦除等操作。 8. **优化与性能**：由于Canvas是实时...
canvas实现橡皮擦效果擦去图片上的文字
qq_17859117的博客
04-01 701
PS：网上有很多资料，但要么是不全，要么是存在一些错误，这里提供一个一键复制完整版。canvas实现橡皮擦效果擦去图片上的文字。
canvas擦除功能—圆形橡皮擦
weixin_44434938的博客
03-26 1426
canvas擦除功能—圆形橡皮擦
canvas 擦除动画_使用canvas实现擦除效果
weixin_32751907的博客
01-14 278
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。html代码:设置一个父容器，里面包括canvas标签，用于遮罩，content用于显示擦除遮罩层之后的内容ps：设置canvas元素需要加上width和height属性，这样绘制的图形才能按照正常尺寸显示，否...
canvas实现擦除动画
Preserve
07-16 2054
原理总结为就是在移动设备上将某张图片擦掉显示另一张图片，利用canvas来实现。 如果是用户手动擦除，则需要监听touchmove,touchend等事件，并计算相应的坐标，利用canvas的clearRect或rect 画弧线或画线来实现。但是这会造成在androd手机上存在卡顿的现象。 canvas有个globalCompositeOperation属性，这个属性的默认值是source-over
canvas实现刮刮卡，实现canvas擦除
lishangua的专栏
06-07 5671
其实这个问题，一直以来都不是问题，因为以前用canvas做的擦除都是针对手机满屏幕来擦除，所以一直没有踩到这个坑~~~ 网络上的擦除效果其实写的都挺泛泛的，没有特别详细的，这里给你们贴一下擦除的源代码，顺便把坑也给你们先预填了，嘿嘿。 这里面最大的坑就是，如果只是擦除一小部分的时候，你就需要将canvas进行定位移动，但是移动后，canvas里的画笔也会进行一起位移。所以在ca
前端提高篇(六十八)：HTML进阶9：canvas画布基本知识（三）操作图形：坐标轴保存恢复，变换，擦除，组合(1)
最新发布
radcb55226的博客
04-05 700
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
canvas实现redo和undo、擦除功能
weixin_45781661的博客
05-23 923
canvas实现redo和undo、擦除功能 首先，在html文件中引入canvas,除此之外，我还引入了jQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
Canvas清理画布
靠谱青年
03-15 2983
清理画布 第一种方式：canvas.drawColor(colorAlpha, PorterDuff.Mode.CLEAR); 第二种方式： Paint p = new Paint(); p.setXfermode(new PorterDuffXfermode(Mode.CLEAR)); canvas.drawPaint(p); p.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); 这两
Canvas清除画布
乾坤我做主的博客
02-29 1087
clearRect() 函数指定起始点的x, y 位置以及宽度和高度来清除画布。使用白色背景色简单地填充整个画布，可以清除当前内容。当画布的宽或高被重置时，当前画布内容就会被移除。
canvas图像擦除笔及图像修补笔
07-22
要实现 Canvas 图像擦除笔和图像修补笔的功能，你可以使用以下方法： 1. 图像擦除笔： - 设置 `globalCompositeOperation` 属性为 `"destination-out"`，这将使绘制的内容被擦除掉。 - 在鼠标或触摸事件的处理程序中，使用擦除笔的形状和样式进行绘制，以将图像部分擦除。 2. 图像修补笔： - 设置 `globalCompositeOperation` 属性为 `"source-over"`，这将允许正常绘制。 - 在鼠标或触摸事件的处理程序中，使用修补笔的形状和样式进行绘制，覆盖之前擦除的部分，实现图像的修补。 下面是一个简单的示例代码，演示了如何实现图像擦除笔和图像修补笔的功能： ```html <canvas id="myCanvas" width="400" height="400"></canvas> <button onclick="setEraser()">擦除笔</button> <button onclick="setBrush()">修补笔</button> <script> const canvas = document.getElementById("myCanvas"); const context = canvas.getContext("2d"); let isDrawing = false; let isErasing = false; let brushSize = 10; let brushColor = "black"; canvas.addEventListener("mousedown", startDrawing); canvas.addEventListener("mousemove", draw); canvas.addEventListener("mouseup", stopDrawing); canvas.addEventListener("mouseout", stopDrawing); function startDrawing(e) { isDrawing = true; context.beginPath(); context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); } function draw(e) { if (!isDrawing) return; const x = e.clientX - canvas.offsetLeft; const y = e.clientY - canvas.offsetTop; if (isErasing) { context.globalCompositeOperation = "destination-out"; context.arc(x, y, brushSize / 2, 0, 2 * Math.PI); context.fill(); } else { context.globalCompositeOperation = "source-over"; context.fillStyle = brushColor; context.arc(x, y, brushSize / 2, 0, 2 * Math.PI); context.fill(); } } function stopDrawing() { isDrawing = false; } function setEraser() { isErasing = true; brushColor = "white"; } function setBrush() { isErasing = false; brushColor = "black"; } </script> ``` 在上述示例中，你可以使用鼠标或触摸事件在 Canvas 上绘制图像。点击 "擦除笔" 按钮将调用 `setEraser()` 函数，设置为图像擦除笔；点击 "修补笔" 按钮将调用 `setBrush()` 函数，设置为图像修补笔。通过调整 `brushSize` 和 `brushColor` 变量，可以更改笔刷的大小和颜色。使用鼠标或触摸事件绘制时，根据当前设置的笔刷类型进行相应的绘制操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值