您好,登錄后才能下訂單哦!
今天小編給大家分享一下怎么使用CSS Houdini繪制平滑圓角的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
首先,我們給paintWorkle添加一個(gè)繪圖模塊[1]
(CSS.paintWorklet || paintWorklet).addModule('smooth-corners.js')
然后,在這個(gè)模塊中,我們注冊(cè)一個(gè)繪圖過(guò)程(paint),名字叫做 smooth-corners,這個(gè)繪圖過(guò)程必須提供一個(gè)paint方法來(lái)繪制超橢圓。
registerPaint('smooth-corners', class {
paint(ctx, size) {
ctx.fillStyle = 'black'
// n=4 時(shí),繪制一個(gè)方圓形
const n = 4
let m = n
if (n > 100) m = 100
if (n < 0.00000000001) m = 0.00000000001
const r = size.width / 2
const w = size.width / 2
const h = size.height / 2
ctx.beginPath();
for (let i = 0; i < (2*r+1); i++) {
const x = (i-r) + w
const y = (Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(i-r),m)),1/m)) + h
if (i == 0)
ctx.moveTo(x, y)
else
ctx.lineTo(x, y)
}
for (let i = (2*r); i < (4*r+1); i++) {
const x = (3*r-i) + w
const y = (-Math.pow(Math.abs(Math.pow(r,m)-Math.pow(Math.abs(3*r-i),m)),1/m)) + h
ctx.lineTo(x, y)
}
ctx.closePath()
ctx.fill()
}
})
paint方法接受兩個(gè)參數(shù):
ctx是一個(gè)PaintRenderingContext2D對(duì)象,這個(gè)對(duì)象實(shí)現(xiàn)了CanvasRenderingContext2D的一個(gè)子集,因此大多數(shù)情況下你可以用它繪制任何圖形
size是一個(gè)PaintSize對(duì)象,規(guī)定所繪制圖形的大小
現(xiàn)在我們可以在 CSS 中調(diào)用這個(gè)paint()函數(shù)。執(zhí)行這個(gè)函數(shù),我們將會(huì)得到一個(gè)黑色的平滑圓角矩形。
.el {
background: paint(smooth-corners);
}
為了簡(jiǎn)單起見(jiàn),我們將生成的圖像用作圖層遮罩(mask)[2],這樣,我們就可以很容易地通過(guò)background設(shè)置想要的背景色、漸變、或者圖像。
.el {
background: linear-gradient(deeppink, orangered);
mask-image: paint(smooth-corners);
}
視覺(jué)效果不錯(cuò),但程序靈活性還不夠?,F(xiàn)在,我們只是畫(huà)了一種特殊的超橢圓——方圓形[3](注意代碼中n = 4)。那么,我們?nèi)绾萎?huà)任意指數(shù)的超橢圓呢?比如說(shuō) iOS 使用了 n = 5。我們可以使用 CSS 自定義屬性來(lái)達(dá)到目的。
以上就是“怎么使用CSS Houdini繪制平滑圓角”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。