Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to use CSS Houdini to draw smooth fillets of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

First, we add a drawing module to paintWorkle [1]

(CSS.paintWorklet | | paintWorklet) .addModule ('smooth-corners.js')

Then, in this module, we register a drawing process (paint) called smooth-corners, which must provide a paint method to draw the hyperellipse.

RegisterPaint ('smooth-corners', class {

Paint (ctx, size) {

Ctx.fillStyle = 'black'

/ / when nasty 4, draw a square circle

Const n = 4

Let m = n

If (n > 100m = 100m)

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); iTunes +) {

Const x = (iMurr) + w

Const y = (Math.pow (Math.abs (Math.pow (rjingm)-Math.pow (Math.abs (iMuir), m)), 1) + h

If (I = = 0)

Ctx.moveTo (x, y)

Else

Ctx.lineTo (x, y)

}

For (let I = (2roomr); I < (4*r+1); iTunes +) {

Const x = (3*r-i) + w

Const y = (- Math.pow (Math.abs (Math.pow (rjingm)-Math.pow (Math.abs (3*r-i), m)), 1Gago)) + h

Ctx.lineTo (x, y)

}

Ctx.closePath ()

Ctx.fill ()

}

})

The paint method accepts two parameters:

Ctx is a PaintRenderingContext2D object that implements a subset of CanvasRenderingContext2D, so in most cases you can use it to draw any graph

Size is a PaintSize object that specifies the size of the drawing

Now we can call the paint () function in CSS. By executing this function, we will get a black smooth rounded rectangle.

.el {

Background: paint (smooth-corners)

}

For simplicity, we use the resulting image as a layer mask (mask) [2] so that we can easily set the background color, gradient, or image we want through background.

.el {

Background: linear-gradient (deeppink, orangered)

Mask-image: paint (smooth-corners)

}

The visual effect is good, but the program flexibility is not enough. Now, we just draw a special kind of hyperellipse-the square circle [3] (note that n = 4 in the code). So, how do we draw a hyperellipse with any index? For example, iOS uses n = 5. We can use CSS custom properties to do this.

These are all the contents of the article "how to draw smooth fillets with CSS Houdini". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.