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

This article mainly introduces how css fills colors in the shape of the canvas. It is very detailed and has a certain reference value. Friends who are interested must read it!

You can also use the fillStyle () method to fill the canvas shape with colors.

The following example shows you how to fill a rectangular shape with a solid color.

Try this code for example »

_ window.onload = function () {

Var canvas = document.getElementById ("myCanvas")

Var context = canvas.getContext ("2d")

Context.rect (50,50,200,100)

Context.fillStyle = "# FB8B89"

Context.fill ()

Context.lineWidth = 5

Context.strokeStyle = "black"

Context.stroke ()

}

Tip: when styling shapes on the canvas, it is recommended that you use the stroke () method before the fill () method to render the stroke correctly.

Similarly, you can use this fillStyle () method to fill the circle with solid colors.

Try this code for example »

_ window.onload = function () {

Var canvas = document.getElementById ("myCanvas")

Var context = canvas.getContext ("2d")

Context.arc (150,100,70,0,2 * Math.PI, false)

Context.fillStyle = "# FB8B89"

Context.fill ()

Context.lineWidth = 5

Context.strokeStyle = "black"

Context.stroke ()

}

The above is all the content of the article "how css fills colors in canvas shapes". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.