cost 380 ms
使用 globalCompositeOperation = 'source-in' 时清除 Canvas - clear Canvas when using globalCompositeOperation = 'source-in'

我正在带面具的 canvas 中画一张脸。 仅在面罩已满的情况下,脸部才会出现。 它工作正常,但我想在拖动时移动脸部。 所以我需要重置canvas,然后重新绘制脸部。 但是当我这样做时 我得到一个空白的 canvas,并且在调用 resetCanvas 后绘图面 function 不再起作用。 我 ...

将滤色器添加到图像的黑暗部分,并在图像的亮部添加另一个滤镜? - Add color filter to dark part of image and another filter to light part of the image?

我的挑战是在图像的暗部添加滤色器,在图像的亮部添加另一个滤色器。 要达到这样的效果https://imgur.com/a/cGmJbs9 我正在使用具有 globalCompositeOperation 效果的 canvas,但我只能应用一个过滤器而不影响另一个。 这非常适用于基于 globalC ...

如何计算硬光复合混合模式的倒数? - How to calculate inverse of hard-light composite blend mode?

我在客户端上有一个“旧”RGBA 画布,在服务器上有一个更新版本的相同图像。 它们之间存在小的视觉差异。 我希望服务器能够向客户端发送一些“差异”,以便能够更新它的图像以匹配新版本,而不必再次发送整个图像数据。 两帧透明 webm 视频将是理想的(即使用 webm 对差异进行编码),但对具有透明 ...

如何使用fabric js仅通过覆盖矩形打孔? - how to make a hole through only overlay Rectangle using fabric js?

我正在使用fabric js 1.7.22版开发图像裁剪器。 通常,每个裁剪器都会在图像上显示黑色透明覆盖层(图像看起来很暗淡),并且还显示一个 Rect。 (裁剪图像看起来充满颜色的区域)。 我们可以使用带有背景图像和fabric.Rect object 的织物 js 创建此功能。 我的问题是 ...

Canvas globalCompositeOperation源输入和目标输入不适用于多个源和目标 - Canvas globalCompositeOperation source-in and destination-in not working with multiple source and destination

HTML5 Canvas globalCompositeOperation值source-in和destination-in不适用于多个源图像和目标图像。 该操作将导致空白画布。 globalCompositeOperation的所有其他值都起作用。 让我知道我的操作方式有问题还是错 ...

在KonvaJS上使用带globalCompositeOperation的图像蒙版? - Using image mask with globalCompositeOperation on KonvaJS?

我正在使用Konva.js框架,并尝试在另一个框架上应用图像蒙版。 该代码从这个完全复制后 。 在此jsfiddle示例中 ,进行了少量修改以添加背景(Rect)。 问题是背景没有正确绘制。 要在代码中看到它的实际效果,请在一行中添加注释/取消注释(以查看问题所在)。 有人有什么想 ...

如何裁剪/使用globalCompositeOperation =“ desination-out”从画布中排除2个圆? - How do I clip / use globalCompositeOperation = “desination-out” to exclude 2 circles from my Canvas?

我试图弄清楚CanvasRenderingContext2D.globalCompositeOperation = "destination-out ,以便创建”战争迷雾“效果。 给出这个例子 https://jsfiddle.net/wobzpjLL/ 如何创建不包括黑色叠 ...

如何在画布的元素上正确应用globalCompositeOperation? - How correctly apply globalCompositeOperation on canvas's elements?

我对globalCompositeOperation有问题。 我的目标是使“蓝色”元素仅显示在“红色”元素内部,而根本不应该在“红色”矩形外部可见(有点像“溢出隐藏”效果)。 另外,红色和蓝色都必须具有转换功能(均可编辑)。 如您所见,如果我在画布中再添加一个元素(黄色元素),则在 ...

HTML画布:圆形形状(行星)的内部阴影 - HTML Canvas: inner shadow for circle shapes (planets)

我的意图是在圆形内部绘制半圆形的内部阴影,以表示行星围绕恒星运动(这是我正在研究的教育计划的一部分)。 经过多种方法,这几乎对我有用: 画一个圆形(小行星),然后在其上画一个包含实际阴影的大圆圈。 2.使用组合选项“ ctx.globalCompositeOperati ...

对有限数量的图像使用globalCompositeOperation - Using globalCompositeOperation for a limited number of images

我有一个非常简单的问题:是否可以仅对有限数量的图像使用globalCompositeOperation? 例如,我在画布上画了很多东西。 最重要的是,我想对两个图像进行一些操作(并且只希望显示结果,而不是两个图像),并且完成了所有无关的操作。 那怎么办? 目前,执行此类操作会影响 ...

如何撤消HTML5 Canvas绘图应用程序的橡皮擦操作 - How to Undo the eraser action for HTML5 Canvas Drawing App

我创建了一个HTML5绘图应用程序,该应用程序具有一些基本功能,这些功能允许用户选择一种绘制颜色,更改绘制工具的大小(半径),撤消,重做并完全清除画布。 我最近添加了一个使用globalCompositionProperty的橡皮擦工具(desitnation-out)以擦除画布的选定区域 ...

Firefox错误-globalCompositeOperation无法与SVG元素的drawImage一起使用 - Firefox bug - globalCompositeOperation not working with drawImage for an SVG element

我正在尝试在Canvas中创建“橡皮擦”效果,但是将SVG图像用作橡皮擦的自定义形状。 因此,我可以将我的SVG图像绘制到画布上,并使用globalCompositeOperation ='destination-out'创建遮罩效果。 它在IE,Safari和Chrome中都很好用 ...

JS:如何获取受支持的HTML画布globalCompositeOperation类型的列表 - JS: How to get list of supported HTML canvas globalCompositeOperation types

我想创建一个HTML select列表,我可以选择在混合两个canvas元素时应用哪种类型的globalCompositeOperation ,如下所示: 有没有办法以编程方式获取可用的globalCompositeOperation类型列表作为Javascript对象或数组,因此它可以 ...

JavaScript画布裁剪形状超出范围时 - JavaScript canvas clipping shape when out of bounds

我所要求的可能非常简单,但要获得预期的结果却遇到了很多麻烦。 我想要一个形状(在本示例中为正方形,但应与其他形状(例如圆形等)一起使用)在离开另一个形状的边界时将其自身切掉。 基本上,顶部图像是我想要的,底部图像是我目前拥有的: http : //imgur.com/a/oQkzG ...

重新填充画布上已擦除区域的区域 - Re-fill area of erased area for canvas

我正在尝试使用下面的代码片段在画布的Image上填充颜色来填充图像中的颜色。 它成功地在画布上填充了颜色。 现在,我尝试使用此代码段擦除用户在触摸时的填充色,以擦除canvas图像上的颜色。 其擦除颜色并在该触摸位置设置透明区域。 现在,我想用颜色为用户触摸填充该区域,但是由于透明像素, ...

在为“ source-in” globalCompositeOperation蒙版动画时,画布会消失 - Canvas disappears when animating “source-in” globalCompositeOperation mask

我在画布上使用“源入”合成渐变蒙版,我想为蒙版形状和渐变的拉伸设置动画。 这是合成代码,一个名为drawList的函数: stretch从0开始,并使用requestAnimationFrame在一个动画函数中增加,我已经验证了在对简单矩形甚至ctx.clearRect(300, 0, ...

HTML canvas的“ source-over”和“ destination-over” globalCompositeOperation之间的性能差异 - Performance difference between 'source-over' and 'destination-over' globalCompositeOperation for HTML canvas

在查看了用于在2D画布上绘制的各种globalCompositeOperation选项之后 ,我发现destination-over本质上与默认的source-over相同,但是元素是相反绘制的。 我想知道是否有人知道画布计算构图并绘制像素时这两个操作之间是否存在性能差异。 ...


 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM