How to use CSS Houdini to draw smooth fillet
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.
