html5清除画布代码,清除HTML5 Canvas中的圆形区域-程序员宅基地

技术标签: html5清除画布代码  

Daniel Kapla..

9

鉴于要求,这些答案都很好.但是,让我们说你和我一样,你有额外的要求:

您想要"清除"可能部分超出您正在清除的形状范围的形状的一部分.

您希望在形状下方看到背景而不是清除背景.

对于第一个要求,解决方案是使用context.globalCompositeOperation = 'destination-out' 蓝色是第一个形状,红色是第二个形状.如您所见,destination-out从第一个形状中删除该部分.

arNmT.png

这是一些示例代码:

explosionCanvasCtx.fillStyle = "red"

drawCircle(explosionCanvasCtx, projectile.radius, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

explosionCanvasCtx.globalCompositeOperation = 'destination-out' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

drawCircle(explosionCanvasCtx, projectile.radius + 20, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

下面是这个潜在的问题:第二个fill()将清除一切在它之下,包括背景.有时您只想清除第一个形状,但仍希望看到它下面的图层.

解决方法是drawImage在临时画布上绘制它,然后将临时画布绘制到主画布上.代码如下所示:

diameter = projectile.radius * 2

console.log ""

explosionCanvas = $("")

explosionCanvasCtx = explosionCanvas[0].getContext("2d")

explosionCanvasCtx.fillStyle = "red"

drawCircle(explosionCanvasCtx, projectile.radius, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

explosionCanvasCtx.globalCompositeOperation = 'destination-out' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

durationPercent = (projectile.startDuration - projectile.duration) / projectile.startDuration

drawCircle(explosionCanvasCtx, projectile.radius + 20, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

explosionCanvasCtx.globalCompositeOperation = 'source-over' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

ctx.drawImage(explosionCanvas[0], projectile.pos.x - projectile.radius, projectile.pos.y - projectile.radius) #center

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_28837817/article/details/118619639

智能推荐

vue + element实现el-date-picker的时间格式转换,以及自定义时间格式,修改输入的时间格式_el-date-picker组件 实现输入20240120 转化成20240120 支持手动输入还支-程序员宅基地

文章浏览阅读3.9k次。实现日期选择输入框的时间格式转换、根据数据的情况自动化格式为需要的格式,如果只是需要修改传给后端的值或者格式,可以使用 value-format实现,可以在文档上查看详细的介绍。_el-date-picker组件 实现输入20240120 转化成20240120 支持手动输入还支持时间框

TINYMCE实现从WORD直接粘贴并自动上传图片-程序员宅基地

文章浏览阅读150次,点赞9次,收藏4次。Tinymce编辑器实现从word直接粘贴并自动上传图片,一键粘贴word内容,支持快捷键粘贴(Ctrl+V)并自动上传图片,一键导入word文件,粘贴后文字和图片自动添加到编辑器中,图片自动上传到服务器中,服务器位置可以自定义,自己指定,图片存储接口也能够自定义。关于tinymce粘贴图片,粘贴word,一键导入word,粘贴word内容,网上能找到的方案不是特别多,都是通过HTML5提供的API来实现的。功能上来讲的确是非常方便,对文字,内容,新闻编辑工作来讲,能够大幅度提高效率。

超牛逼的几款轻量级笔记软件!-程序员宅基地

文章浏览阅读5.5k次。点击关注公众号,回复“1024”获取2TB学习资源!编程容易产生挫折,即使作为一种业余爱好也可能是这样。建立一个网页,手机APP或桌面应用都是个很大的工程,好的记笔记技能是让这个工程井然有..._轻量级记事本

ffmpeg报错:Unable to find a suitable output format for-程序员宅基地

文章浏览阅读1.9w次。关于报错:Unable to find a suitable output format for这里显示的路径和我的文件名并不同,说明这个文件名,不能包括空格,所以我把文件名改了就行了。解决。_unable to find a suitable output format for

图片风格迁移学习记录_图像风格转换-程序员宅基地

文章浏览阅读1.7k次,点赞38次,收藏35次。学习笔记:深度学习(3)——卷积神经网络(CNN)理论篇_cnn理论-程序员宅基地学习图像风格迁移前,需要掌握一些深度学习的卷积神经网络知识,可以参考上面这篇文章。简单来说,卷积神经网络(Convolutional Neural Networks, CNNs)是一种深度学习架构,特别适合于处理具有网格结构的数据,如图像(2D网格)和声音(1D网格)。CNN通过使用卷积层自动且有效地捕捉空间和时间上的局部模式来学习数据的特征。而VGG16。_图像风格转换

go遇到“no new variables on left side of :=”报错-程序员宅基地

文章浏览阅读308次。go基础编译问题

随便推点

饺子播放器Jzvd使用过程中遇到的问题汇总-程序员宅基地

文章浏览阅读332次,点赞6次,收藏8次。继续看第一个方法第四行开始,毫无疑问,作者获取getDecorView()根视图,然后将原来的对象放入了跟视图,同时隐藏了状态栏,也即是开启了全屏模式,汗,简单粗暴。从上方代码第三行跳转到下面这个方法,可以看出作者用构造器构造了一个新的对象替代了原来位置的对象。还不够,那如何从全屏模式回来呢,作者在打开全屏的时候,就将原视图的父容器存放到了一个链表中。

python- flask current_app详解,与 current_app._get_current_object()的区别以及异步发送邮件实例-程序员宅基地

文章浏览阅读3.6k次,点赞4次,收藏8次。核心知识AppContext手动、自动入栈LocalStack是线程隔离的栈结构current_app是线程、协程隔离对象LocalProxy是获取当前线程隔离的代理对象一、flask中经典错误 working outside application context错误:working outside application contex原因:在没有获取到应用上下文的情况下,进行了上下文操作。代码:from flask import Flask, current_appapp =_flask current_app

堪比ps的mac修图软件 Pixelmator Pro 2.0.6中文版 支持Silicon M1_pixelmator堆栈-程序员宅基地

文章浏览阅读1.4k次。pixelmator pro中文版是最具创新性也是最好用的mac修图软件,拥有广泛的专业级,非破坏性的图像编辑工具,干净整洁的界面易于操作,支持常见的PSD、TIFF、JPEG、PNG、PDF、EPS 等图形文件格式,提供量选取、渐变、笔刷、填充、裁切,甚至魔术棒工具等功能,拥有50 多种专业的滤镜,它能实现的图片处理功能效果堪比Photoshop,在界面上它与 Photoshop 也有许多相似之处,但它更加轻量便捷!pixelmator pro 可以让常用的修图操作更爽更简单!软件来源:http._pixelmator堆栈

「USACO2015」 最大流 - 树上差分_usaco 差分-程序员宅基地

文章浏览阅读301次。题目大意给定一棵有N个点的树,所有节点的权值都为0。有K次操作,每次指定两个点s,t,将s到t路径上所有点的权值都加一,最后输出K次操作完毕后权值最大的那个点的权值。分析算得上是树上差分的模板题了。说一下普通的差分。现在有这么一个问题,给定一个序列A,有K个修改,每个修改将[L,R]中的数加1,最后问其中的最大数。最普通的做法就是每次跑一遍[L,R],并更新最大值,显然这样做可能会..._usaco 差分

Leetcode #315: 计算右侧小于当前元素的个数_找元素右边比他小的数字-程序员宅基地

文章浏览阅读201次。Leetcode #315: 计算右侧小于当前元素的个数题目题干示例题解方法一:蛮力法。PythonC++方法二:使用容器。PythonC++方法三: 构建二叉搜索树。C++题目题干该问题计算右侧小于当前元素的个数 题面:You are given an integer array nums and you have to return a new counts array. The counts array has the property where counts[i] is the num_找元素右边比他小的数字

HTTP图解读书笔记(第六章 HTTP首部)响应首部字段_web响应的首部内容-程序员宅基地

文章浏览阅读142次。Accept-Ranges告知客户端服务器是否可以处理范围请求(可以:bytes,不可以:none)Age告诉客户端,源服务器在多久前创建了响应,单位为秒ETag首部字段 ETag 能告知客户端实体标识。它是一种可将资源以字符串形式做唯一性标识的方式。服务器会为每份资源分配对应的 ETag值 另外,当资源更新时,ETag 值也需要更新。生成 ETag 值时,并没有统一的算法..._web响应的首部内容

推荐文章

热门文章

相关标签