cost 300 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