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

This article mainly explains "the method of stroke and filling in HTML5". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of stroke and filling in HTML5".

Fill Color-fill attribute

This property fills the interior of the graph with the set color. It is easy to use. Just assign the color value to this property. Look at the example:

The copy code is as follows:

A rectangle with a red and blue edge is drawn in the above example. Note a few points:

1. If the fill property is not provided, the black fill is used by default, and if you want to unfill it, you need to set it to none.

two。 You can set the transparency of the fill, which is fill-opacity, with values ranging from 0 to 1.

3. Slightly more complicated is the fill-rule attribute. This property defines an algorithm for determining whether a point belongs to the fill range; in addition to the value of inherit, there are two other values:

Prop-value "> nonzero: the algorithm for this value is as follows: rays are sent in any direction from the point to be determined, and then the direction of the intersection of the graph and the line segment is calculated. Starting from 0, the line segment at each intersection is added by 1, and the line segment at each intersection is subtracted by 1 from right to left. After all the intersections are calculated in this way, if the result of the calculation is not equal to 0, the point is in the graph and needs to be filled; if the value is equal to 0, then outside the graph, there is no need to fill. Look at the following example:

Evenodd: the algorithm for this value is: send rays in any direction from the points to be determined, and then calculate the number of intersecting points between the graph and the line segment. If the number is odd, the points are changed in the graph and need to be filled; if the number is even, the points are outside the graph and do not need to be filled. Look at the example in the following figure:

Border color-stroke attribute

The stroke property has been used in the above example, which uses the set value to draw the border of the graph, and it is also very straightforward to use, just assign the color value to it. Note:

1. If the stroke property is not provided, the drawing border is not drawn by default.

two。 You can set the transparency of the edge, that is, stroke-opacity, with values ranging from 0 to 1.

In fact, the situation of the edge is a little more complicated than the interior of the graph, because in addition to the color, there is a "shape" that needs to be defined.

Endpoint of the line-stroke-linecap attribute

This property defines the style of the end of the segment, and this property can use three values of butt,square,round. Look at the example:

The copy code is as follows:

This code draws three lines with different style line endpoints

We can easily see the difference in style in the three styles from the picture on the left.

Connection of lines-stroke-linejoin attribute

This property defines the style at the segment connection, and this property can use three values of miter,round,bevel. Look at the example:

The copy code is as follows:

From the picture on the left, we can easily see the difference in style among the three.

Virtual and real line-stroke-dasharray attribute

This property sets what kind of dashed and solid lines are used for the segment. Look at the example:

The copy code is as follows:

This property sets some column numbers, but they must be separated by commas.

Property can of course contain spaces, but spaces are not used as delimiters. Every number

The length of the solid line segment is defined, which is cycled in the order of drawing and not drawing.

So the line drawn in the example on the left is a solid line of 5 units, leaving 5 units of space.

Draw a solid line of 5 units. It goes on like this.

In addition to these commonly used properties, the following properties can be set:

Stroke-miterlimit: this is the same as in canvas, it deals with when to draw and not draw the line of the connection of the miter effect.

Stroke-dashoffset: this property sets where to start drawing dotted lines.

Using CSS to display data

HTML5 reinforces the idea of DIV+CSS, so the part that presents the data can also be left to CSS. Compared to normal HTML elements, it's just that background-color and border are replaced by fill and stroke. Most of the others are about the same. Take a brief look at an example:

The copy code is as follows:

# MyRect:hover {

Stroke: black

Fill: blue

}

Thank you for your reading, the above is the content of "the method of Stroke and filling in HTML5". After the study of this article, I believe you have a deeper understanding of the method of stroke and filling in HTML5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.