Html5 Canvas Preliminary Study Notes (3) - Drawing styles and drawing text

By setting the 2d rendering context's fillStyle and strokeStyle attribute, you can change the fill color or drawing color.

The color can be modified in the following three ways:

RgbFormat:

context.fillStyle = 'rgb(255,0,0)';//设置绘制颜色
context.strokeStyle = 'rgb(255,0,0)';//设置绘制颜色

Hexadecimal code format:

context.fillStyle = '#FF0000';//设置绘制颜色
context.strokeStyle = '#FF0000';//设置绘制颜色

Word type:

context.fillStyle = 'red';//设置绘制颜色
context.strokeStyle = 'red';//设置绘制颜色

In addition, for the things that come out of stroke, you can also change the lineWidth attribute To change the line width, the default line width is 1.

The effect comparison is as follows:

The line width above is 1 , the line width below is 5.

It should be noted that both color and line width are the same as j2me#setColor. The status value will not be restored to the default value after use. The drawn text in Canvas

is drawn in the form of an image and cannot be selected by the mouse pointer like ordinary

html text. The font size can be selected for drawing text in Canvas, which are set in the font properties. There are also fill and stroke methods when drawing, which are filled words and hollow words respectively. The first parameter is text, and the second parameter is text. The first parameter and the third parameter is the anchor point of the text (lower left corner). The code and font effects are as follows:

## is normal and italic respectively , and the effect of hollow words:

The above is the content of Html5 Canvas preliminary study notes (3) - drawing style and drawing text. Please pay attention to more related content. PHP Chinese website (www.php.cn)!