Home > Web Front-end > H5 Tutorial > Html5 Canvas Preliminary Study Notes (3) - Drawing styles and drawing text

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

黄舟
Release: 2017-02-28 15:26:41
Original
1201 people have browsed it

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)';//设置绘制颜色
Copy after login

Hexadecimal code format:

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

Word type:

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

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)!



source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template