資訊專欄INFORMATION COLUMN
摘要：效果如下圖所示如何實現(xiàn)反向裁剪呢筆者通過實踐，發(fā)現(xiàn)有以下幾種思路。使用合成模式通過設置的值，可以實現(xiàn)類似的反向裁剪的效果。示例代碼如下最終效果參考上面的圖形反向裁剪。
我們都知道在canvas 可以通過clip來實現(xiàn)剪裁功能，其步驟一般是先設置要裁剪的區(qū)域（路徑），然后通過ctx.clip()的實現(xiàn)裁剪，裁剪之后，后續(xù)的繪制只能在裁剪的區(qū)域顯示效果，比如如下一段代碼，實現(xiàn)了一個圓形裁剪：
ctx.beginPath(); ctx.arc(100,100,50,0,Math.PI*2); ctx.clip(); ctx.rect(0,0,200,200); ctx.fillStyle="red"; ctx.fill();
最終效果如下：
有的時候，我們希望能夠?qū)崿F(xiàn)反向裁剪，比如上面例子中，我們希望是圓圈外面是裁剪區(qū)域，而不是圓圈內(nèi)部是裁剪區(qū)域。這就是標題所說的反向裁剪。效果如下圖所示：
如何實現(xiàn)反向裁剪呢？
筆者通過實踐，發(fā)現(xiàn)有以下幾種思路。
通過設置globalCompositeOperation的值，可以實現(xiàn)類似的反向裁剪的效果。大致思路是：
首先繪制一個圖形（比如圓形），該圖形外部的區(qū)域?qū)遣眉魠^(qū)域
設置globalCompositeOperation的值為source-out
然后繪制想要繪制的圖形（比如矩形）
示例代碼如下：
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.globalCompositeOperation = "source-out"; ctx.rect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.fill();
最終效果參考上面的圖形“反向裁剪”。
使用clip + clearRect方法另外一種思路是使用clip + clearRect方法，大概的思路如下：
首先繪制要繪制的圖形（比如矩形）
然后設置要反向裁剪的圖形的路徑（比如圓形）
然后調(diào)用clip ，再調(diào)用clearRect方法清除圓形區(qū)域的像素。
示例代碼如下：
ctx.beginPath(); ctx.rect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.fill(); ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.clip(); ctx.clearRect(0, 0, 200, 200);
最終效果參考上面的圖形“反向裁剪”。
利用非零環(huán)繞原則我們知道非零環(huán)繞原則，可以通過調(diào)整路徑的方向（順時針和逆時針），來實現(xiàn)挖空的效果，大致思路如下：
首先構建一個大的區(qū)域路徑（順時針方向），比如矩形
然后構建一個小的區(qū)域路徑（逆時針方向），比如圓形
調(diào)用clip裁剪，然后繪制圖形
示例代碼如下：
ctx.beginPath(); ctx.rect(0, 0, 200, 200); //順時針方向 ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 逆時針方向 ctx.clip(); ctx.beginPath(); ctx.rect(0, 0, 200, 200); ctx.fillStyle = "red"; ctx.fill();
arc方法的最后一個參數(shù)可以控制順時針（false）和逆時針（true），而rect方法沒有，可以通過moveTo，lineTo，自己構建逆時針的rect方法，如下代碼所示：
function counterclockwiseRect(ctx, x, y, w, h) {
ctx.moveTo(x, y);
ctx.lineTo(x, y + h);
ctx.lineTo(x + w, y + h);
ctx.lineTo(x + w, y);
ctx.lineTo(x, y);
}
最終效果參考上面的圖形“反向裁剪”。
參考文檔https://stackoverflow.com/que...
https://stackoverflow.com/que...
http://caibaojian.com/canvas/...（非零環(huán)繞原則 ）
歡迎關注公眾號“ITman彪叔”。彪叔，擁有10多年開發(fā)經(jīng)驗，現(xiàn)任公司系統(tǒng)架構師、技術總監(jiān)、技術培訓師、職業(yè)規(guī)劃師。熟悉Java、JavaScript、Python語言，熟悉數(shù)據(jù)庫。熟悉java、nodejs應用系統(tǒng)架構，大數(shù)據(jù)高并發(fā)、高可用、分布式架構。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業(yè)規(guī)劃有濃厚興趣。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101704.html
摘要：最近的一個客戶項目中，簡化的需求是繪制按照行列繪制很多個圓圈。等等，客戶要求繪制的極限是萬個，而且每次繪制不能卡頓。然后通過通過創(chuàng)建對象，并把的繪制上下文的指定為該對象。另外繪制的效果其實是沒有繪制的效果好的，鋸齒嚴重。 最近的一個客戶項目中，簡化的需求是繪制按照行列繪制很多個圓圈。需求看起來不難，上手就可以做,寫兩個for循環(huán)。 原始繪制方法 首先定義了很多Circle對象，在遍歷循...
摘要：實現(xiàn)原理簡單，純技術處理圖片，幾乎不需要用到相關知識面向人群急于使用頭像裁剪組件的同學。裁剪框初始寬高上傳圖片后，裁剪區(qū)將預設為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續(xù)優(yōu)化。 項目簡介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無需安裝依賴 使用九宮格進行裁剪，自由選擇裁剪區(qū)域。 實時預覽裁剪后效果。 可以將裁剪好的圖片，...
摘要：最近在整理全棧開發(fā)方面的技術細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。 最近在整理全棧開發(fā)方面的技術細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。地址：前端開發(fā)文檔 全棧開發(fā) HTML5/CSS3 HTML元素 語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南 彈性圖...
摘要：最近在整理全棧開發(fā)方面的技術細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。 最近在整理全棧開發(fā)方面的技術細節(jié)，寫成文檔方便工作中查找，在這里分享這個站點。地址：前端開發(fā)文檔 全棧開發(fā) HTML5/CSS3 HTML元素 語義化標簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動 CSS定位 SVG指南 彈性圖...
閱讀 635·2023-04-25 18:37
閱讀 2796·2021-10-12 10:12
閱讀 8376·2021-09-22 15:07
閱讀 577·2019-08-30 15:55
閱讀 3183·2019-08-30 15:44
閱讀 2204·2019-08-30 15:44
閱讀 1635·2019-08-30 13:03
閱讀 1570·2019-08-30 12:55
