亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

canvas反向裁剪技巧

hqman / 2867人閱讀

摘要：效果如下圖所示如何實(shí)現(xiàn)反向裁剪呢筆者通過(guò)實(shí)踐，發(fā)現(xiàn)有以下幾種思路。使用合成模式通過(guò)設(shè)置的值，可以實(shí)現(xiàn)類似的反向裁剪的效果。示例代碼如下最終效果參考上面的圖形反向裁剪。

我們都知道在canvas 可以通過(guò)clip來(lái)實(shí)現(xiàn)剪裁功能，其步驟一般是先設(shè)置要裁剪的區(qū)域（路徑），然后通過(guò)ctx.clip()的實(shí)現(xiàn)裁剪，裁剪之后，后續(xù)的繪制只能在裁剪的區(qū)域顯示效果，比如如下一段代碼，實(shí)現(xiàn)了一個(gè)圓形裁剪：

ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2);
ctx.clip();

ctx.rect(0,0,200,200);
ctx.fillStyle="red";
ctx.fill();

最終效果如下：

有的時(shí)候，我們希望能夠?qū)崿F(xiàn)反向裁剪，比如上面例子中，我們希望是圓圈外面是裁剪區(qū)域，而不是圓圈內(nèi)部是裁剪區(qū)域。這就是標(biāo)題所說(shuō)的反向裁剪。效果如下圖所示：

如何實(shí)現(xiàn)反向裁剪呢？
筆者通過(guò)實(shí)踐，發(fā)現(xiàn)有以下幾種思路。

使用合成模式globalCompositeOperation

通過(guò)設(shè)置globalCompositeOperation的值，可以實(shí)現(xiàn)類似的反向裁剪的效果。大致思路是：

首先繪制一個(gè)圖形（比如圓形），該圖形外部的區(qū)域?qū)?huì)是裁剪區(qū)域

設(shè)置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方法，大概的思路如下：

首先繪制要繪制的圖形（比如矩形）

然后設(shè)置要反向裁剪的圖形的路徑（比如圓形）

然后調(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)繞原則，可以通過(guò)調(diào)整路徑的方向（順時(shí)針和逆時(shí)針），來(lái)實(shí)現(xiàn)挖空的效果，大致思路如下：

首先構(gòu)建一個(gè)大的區(qū)域路徑（順時(shí)針?lè)较颍?，比如矩?/p>

然后構(gòu)建一個(gè)小的區(qū)域路徑（逆時(shí)針?lè)较颍?，比如圓形

調(diào)用clip裁剪，然后繪制圖形

示例代碼如下：

ctx.beginPath();
ctx.rect(0, 0, 200, 200); //順時(shí)針?lè)较?ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 逆時(shí)針?lè)较?ctx.clip();

ctx.beginPath();
ctx.rect(0, 0, 200, 200);
ctx.fillStyle = "red";
ctx.fill();

arc方法的最后一個(gè)參數(shù)可以控制順時(shí)針（false）和逆時(shí)針（true），而rect方法沒(méi)有，可以通過(guò)moveTo，lineTo，自己構(gòu)建逆時(shí)針的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)繞原則 ）

歡迎關(guān)注公眾號(hào)“ITman彪叔”。彪叔，擁有10多年開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)任公司系統(tǒng)架構(gòu)師、技術(shù)總監(jiān)、技術(shù)培訓(xùn)師、職業(yè)規(guī)劃師。熟悉Java、JavaScript、Python語(yǔ)言，熟悉數(shù)據(jù)庫(kù)。熟悉java、nodejs應(yīng)用系統(tǒng)架構(gòu)，大數(shù)據(jù)高并發(fā)、高可用、分布式架構(gòu)。在計(jì)算機(jī)圖形學(xué)、WebGL、前端可視化方面有深入研究。對(duì)程序員思維能力訓(xùn)練和培訓(xùn)、程序員職業(yè)規(guī)劃有濃厚興趣。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101704.html

相關(guān)文章

  • canvas高效繪制10萬(wàn)圖形,你必須知道的高效繪制技巧

    摘要：最近的一個(gè)客戶項(xiàng)目中，簡(jiǎn)化的需求是繪制按照行列繪制很多個(gè)圓圈。等等，客戶要求繪制的極限是萬(wàn)個(gè)，而且每次繪制不能卡頓。然后通過(guò)通過(guò)創(chuàng)建對(duì)象，并把的繪制上下文的指定為該對(duì)象。另外繪制的效果其實(shí)是沒(méi)有繪制的效果好的，鋸齒嚴(yán)重。 最近的一個(gè)客戶項(xiàng)目中，簡(jiǎn)化的需求是繪制按照行列繪制很多個(gè)圓圈。需求看起來(lái)不難，上手就可以做,寫兩個(gè)for循環(huán)。 原始繪制方法 首先定義了很多Circle對(duì)象，在遍歷循...

    you_De 評(píng)論0 收藏0

  • vue-avatar-tailor，vue頭像裁剪組件

    摘要：實(shí)現(xiàn)原理簡(jiǎn)單，純技術(shù)處理圖片，幾乎不需要用到相關(guān)知識(shí)面向人群急于使用頭像裁剪組件的同學(xué)。裁剪框初始寬高上傳圖片后，裁剪區(qū)將預(yù)設(shè)為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續(xù)優(yōu)化。 項(xiàng)目簡(jiǎn)介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無(wú)需安裝依賴 使用九宮格進(jìn)行裁剪，自由選擇裁剪區(qū)域。 實(shí)時(shí)預(yù)覽裁剪后效果。 可以將裁剪好的圖片，...

    imccl 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)文檔

    摘要：最近在整理全棧開(kāi)發(fā)方面的技術(shù)細(xì)節(jié)，寫成文檔方便工作中查找，在這里分享這個(gè)站點(diǎn)。 最近在整理全棧開(kāi)發(fā)方面的技術(shù)細(xì)節(jié)，寫成文檔方便工作中查找，在這里分享這個(gè)站點(diǎn)。地址：前端開(kāi)發(fā)文檔 全棧開(kāi)發(fā) HTML5/CSS3 HTML元素 語(yǔ)義化標(biāo)簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動(dòng) CSS定位 SVG指南 彈性圖...

    JerryC 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)文檔

    摘要：最近在整理全棧開(kāi)發(fā)方面的技術(shù)細(xì)節(jié)，寫成文檔方便工作中查找，在這里分享這個(gè)站點(diǎn)。 最近在整理全棧開(kāi)發(fā)方面的技術(shù)細(xì)節(jié)，寫成文檔方便工作中查找，在這里分享這個(gè)站點(diǎn)。地址：前端開(kāi)發(fā)文檔 全棧開(kāi)發(fā) HTML5/CSS3 HTML元素 語(yǔ)義化標(biāo)簽 CSS3樣式 CSS選擇器 CSS繼承屬性 CSS3核心模塊 CSS盒子模型 CSS背景圖像 CSS清除浮動(dòng) CSS定位 SVG指南 彈性圖...

    binta 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

hqman

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<