您現在的位置是:電腦技術吧?>? 編程技術 ??>??cad圖像填充,如何填充??>??正文詳情

cad圖像填充,如何填充

左冬卉2019-11-05 15:01:15 人圍觀
簡介ps填充圖片本文詳細闡述了HTML5畫布漸進填充的參數設置和使用,畫布透明度的設置和使用,并結合漸進填充和透明度支持實現了圖像的掩模效果一:漸變填充畫布支持兩種漸進填充方法

詳細解釋HTML5 Canvas中漸進填充的參數設置與使用,Canvas中透明度的設置與使用,結合漸進填充與透明度支持,實現圖像的Mask效果。

一:漸進填充(Gradient Fill) Canvas支持兩種漸進填充方式,一種為線性漸進填充(Line Gradient Fill),另外一種稱 為經向漸變填充(RadialGradient Fill)。

其API分別為: createLinearGradient(x1, y1, x2, y2); 其中x1,y1為第一個點坐標,x2,y2為第二個點坐標。

createRadialGradient(x1, y1, r1, x2, y2, r2); 其中x1, y1為第一個中心點坐標,r1為半徑,x2, y2為第二個中心點坐標,r2為半徑。

為每個點設置顏色 addColorStop(position, color); 其中position表示位置,大小范圍[0~1]其中0表示第一個點,1表示第二個點坐標 Color表示顏色值,任何CSS的顏色值。

漸進填充對象創建與配置之后可以用來設置context的strokeStyle與fillStyle實現文字, 幾何形狀的漸進顏色填充。

線性漸進方式的代碼演示: 1. 垂直(Y)方向顏色漸進 復制代碼代碼如下:// vertical/Y direction var lineGradient = ctx.createLinearGradient (50, 0, 50, 200); lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); ctx.fillStyle = lineGradient; ctx.fillRect(0, 0, 300, 300);

2. 水平(X)方向顏色漸進 復制代碼代碼如下:// horizontal/X direction var lineGradient = ctx.createLinearGradient (0, 50, 200, 50); lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); ctx.fillStyle = lineGradient; ctx.fillRect(0, 0, 300, 300);

3.垂直與水平同時(XY方向)顏色漸進 復制代碼代碼如下:// vertical and horizontal direction var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); ctx.fillStyle = lineGradient; ctx.fillRect(0, 0, 300, 300);

二:透明度(Transparent) Canvas中透明度支持分為全局與局部透明設置,全局透明度的設置可以通過設置 Context.globalAlpha來實現。

局部透明度可以通過fillStyle設置顏色值中alpha值通道 來實現。

兩種方式代碼如下: // change global alpha value ctx.globalAlpha=0.5; ctx.fillRect(50,50,75,50); // change fill style color's alphachannel ctx.fillStyle = 'rgba(225,225,225,0.5)'; ctx.fillRect(50,50,75,50); 兩個效果是一樣的。

三:照片透明漸進Mask效果 使用徑向顏色漸變與透明度變化,實現在圖像上的半透明面罩效果,腳本運行效果:

復制代碼代碼如下:var myImage = document.createElement('img'); myImage.src = ../test.png; myImage.onload = function() { ctx.drawImage(myImage, 80, 30, myImage.naturalWidth, myImage.naturalHeight); var radialGradient = ctx.createRadialGradient (canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 200); radialGradient.addColorStop(0, 'rgba(247, 247, 247, 0)'); radialGradient.addColorStop(0.7, 'rgba(120, 120, 120, 0.5)'); radialGradient.addColorStop(0.9, 'rgba(0, 0, 0, 0.8)'); radialGradient.addColorStop(1, 'rgba(238, 238, 238, 1)'); ctx.beginPath(); ctx.arc(canvas.width/2, canvas.height/2, 300, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = radialGradient; ctx.fill(); }

版權聲明:本文由 左冬卉 整理編輯。

原標題:填充,圖片填充

轉載注明出處:http://www.dn9ww09s.icu/program/11209.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦開機自檢,電腦開機不自檢

    電腦開機自檢,電腦開機不自檢 相關圖片電腦每次開機都自檢小編在打開臺式機的時候,經常能看到電腦的自檢畫面,看著電腦屏幕上的字符串,特別讓人眼花繚亂。但在我關掉開機自檢后,我打開電腦的速度快了很多。所以...

  • 人臉識別代碼,人臉識別

    人臉識別代碼,人臉識別 相關圖片人臉識別原理這是一個演示了html5 javascript技術實現的人臉識別的網站。目前,它只適用于chrome瀏覽器。首先,您需要在地址欄中輸入about:flags,然人臉識別技術原理...

  • DNF如何解除安全模式,dnf安全模式解除不了

    DNF如何解除安全模式,dnf安全模式解除不了 相關圖片dnf避過安全模式dnf的安全模式是當我們的游戲帳戶異常登錄時打開的模式。也許我的搭檔會問我如何刪除這個安全模式?如果你能想到那個問題那就太好了。因為我今天要講的是如何釋...

  • canvas應用技巧,canvas實例

    canvas應用技巧,canvas實例 相關圖片澳洲注意事項畫布的默認寬度和高度為300和150為了避免異常,最好使用顯示屬性而不是css來添加寬度和高度。下面簡單介紹一下使用畫布的注意事項。感興趣的朋友,請參考哈哈,希c...

  • 電腦老是藍屏,電腦突然藍屏

    電腦老是藍屏,電腦突然藍屏 相關圖片電腦藍屏0x0000007b當你使用電腦時,遇到電腦的藍屏是很不愉快的。一兩次,你都不在乎。但是,如何經常使用電腦的藍屏呢看著冰冷的藍色屏幕,它一動不動,這嚴重影響了我們的操作...

  • cpl濾鏡用法,濾鏡怎么使用

    cpl濾鏡用法,濾鏡怎么使用 相關圖片濾鏡用得好css波濾波器可能不會被很多朋友使用。事實上,它工作得很好,可以有很多奇怪的效果。Csswave過濾器可以垂直疊加對象的波樣式,使對象看起來像一個波語法示例:f濾鏡種類...

  • 諾頓殺毒軟件好不好,諾頓殺毒軟件怎么買

    諾頓殺毒軟件好不好,諾頓殺毒軟件怎么買 相關圖片手機諾頓殺毒軟件我相信大多數可愛的電腦都被病毒感染了。像小編這樣的電腦經歷過各種病毒的“愛”。但幸運的是,每次我聰明機智的時候,我就解決了。為什么?因為小編一直在...

  • 基礎組織,組織

    基礎組織,組織 相關圖片組織建設包括哪些方面(譯者注:由于譯言編輯對文章中的標簽進行了解析,我在每個標簽的符號后面加了一個空格,比如左尖括號 字段集 右尖括號,我會寫字段集,這樣就可以在文章...

  • office2017密鑰,office2016激活密鑰

    office2017密鑰,office2016激活密鑰 相關圖片office2019永久密鑰Office2017已準備就緒一些用戶已下載office2017但令一些用戶困擾的是,他們沒有激活密鑰。他們不知道如何激活Office2017。如果您沒有真正的office10密鑰...

  • 手機打開ai文件的軟件,打開ai文件的軟件

    手機打開ai文件的軟件,打開ai文件的軟件 相關圖片什么軟件可以打開ai格式近日,有朋友問小編大達如何打開人工智能文件收到私信后,我特意打開電腦試著操作,然后告訴小朋友開封的過程但我相信還有其他合作伙伴不知道如何打開人...

熱評文章

  • 國際象棋是怎么玩的,國際象棋怎么玩教程

    國際象棋是怎么玩的,國際象棋怎么玩教程 相關圖片中國國際象棋怎么玩國際象棋的動作多種多樣,趣味盎然對兒童智力發展有特別好的作用。因此,國際象棋已被世界上許多國家列入小學課程。那怎么下棋呢?很多人不知道。現在,小...

  • cf筆記本怎么調全屏,筆記本wen10cf怎么調全屏

    cf筆記本怎么調全屏,筆記本wen10cf怎么調全屏 相關圖片筆記本cf分辨率調多少對于很多粉絲來說,用筆記本電腦來播放現場直播是很困難的不,有些用戶在用筆記本電腦播放cf時總是遇到問題。例如,當我玩CF游戲時,我遇到了一個無法獲得...

  • htmlinput屬性,html input標簽屬性

    htmlinput屬性,html input標簽屬性 相關圖片html input value今天收到HTML5 CSS3真是太棒了讓我介紹一下我今天使用的輸入屬性HTML5代碼如下:復制代碼如下:input type=text placeholder=html form表單屬性...

  • 0x00000050藍屏代碼,藍屏代碼0x0000007B

    0x00000050藍屏代碼,藍屏代碼0x0000007B 相關圖片藍屏代碼0x0000003b在計算機使用過程中,用戶不可避免地遇到的計算機故障是計算機開機時的藍屏現象。不,有些用戶報告,當計算機打開時,藍屏代碼0x00000050出現,導致無法使用計算藍...

  • 電腦經常藍屏怎么辦,電腦藍屏怎么辦?

    電腦經常藍屏怎么辦,電腦藍屏怎么辦? 相關圖片宏基筆記本電腦藍屏如果我們生活在電視連續劇里的一天,那么電腦就是電視連續劇里的老二。雖然不多,但這是整個節目的一部分。但是當我們的2號男性屏幕顯示為藍色時,我們應該...

  • 圓角代碼,圓角框架代碼

    圓角代碼,圓角框架代碼 相關圖片html圓角邊框代碼!doctype html public-//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/圓角設置...

  • 蘋果電腦如何切換雙系統,蘋果電腦裝雙系統切換

    蘋果電腦如何切換雙系統,蘋果電腦裝雙系統切換 相關圖片蘋果系統切換到windows系統很多使用Mac和蘋果電腦的朋友都會選擇為自己的電腦安裝雙機系統,因為他們的工作需要不僅僅是使用蘋果的Mac OS系統,所以如何在蘋果雙機系統之間切換,實...

  • 正方體旋轉,正方體旋轉怎么做

    正方體旋轉,正方體旋轉怎么做 相關圖片一個正方體以對角線為軸旋轉渲染:CSS代碼:代碼如下:@keyframes自旋{from{transform:rotatey(0);}到{transform:rotatey(-360DE旋轉正方體怎么折...

  • 電腦開機藍屏怎么解決,電腦經常藍屏怎么辦

    電腦開機藍屏怎么解決,電腦經常藍屏怎么辦 相關圖片筆記本電腦藍屏怎么解決伙計們,我得跟你們吐點苦水前段時間,小編制作的電腦似乎在自由自在,試圖給我一個藍屏。每次都讓我花時間去解決它。你和我有同樣的問題嗎如果有,我...

  • html音樂播放器代碼,iframe音樂播放器代碼

    html音樂播放器代碼,iframe音樂播放器代碼 相關圖片音樂網頁html代碼HTML5的作品,經過測試,效果不錯。不幸的是,他們只支持像谷歌和蘋果這樣的webkit核心瀏覽器。當用戶體驗時,請使用谷歌等瀏覽器運行,否則看不到效果。讓我們h...

關注微信

变脸官网查询