How to apply styles and colors to strokes by HTML5

This article mainly explains "how to apply style and color to brush strokes by HTML5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to apply styles and colors to strokes by HTML5".

The default color of the stroke is black, and its thickness is one pixel. However, you can use the strokeStyleandlineWidth property to set the color and width of the stroke.

The following example draws an orange line with a width of 5 pixels.

Try this code for example »

_ window.onload = function () {

Var canvas = document.getElementById ("myCanvas")

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

Context.lineWidth = 5

Context.strokeStyle = "orange"

Context.moveTo (50,150)

Context.lineTo (250,50)

Context.stroke ()

}

You can also use the lineCap property to set the line cap style. There are three styles of wire caps-butt, round and square. This is an example:

Try this code for example »

_ window.onload = function () {

Var canvas = document.getElementById ("myCanvas")

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

Context.lineWidth = 10

Context.strokeStyle = "orange"

Context.lineCap = "round"

Context.arc (150,150,80,1.2 * Math.PI, 1.8 * Math.PI, false)

Context.stroke ()

}

At this point, I believe you have a deeper understanding of "how to apply style and color in HTML5 strokes". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!