Home > Article > Web Front-end > Detailed explanation of code examples for getting started with HTML5 canvas (picture)

Detailed explanation of code examples for getting started with HTML5 canvas (picture)

黄舟Original: 2017-03-15 16:11:091548browse

1) HTMLCanvasElement Members of object :

# #height——corresponds to the height attribute of the canvas element;

##width—— Corresponds to the width attribute of the canvas element;

# getContext(af16c4db277e0498b5fa9e30613367f1)— — Return the drawing context for the canvas;

##2) Draw the rectangle:

## fillRect(x,y,w,h)——Draw a solid rectangle;

# strokeRect(x,y,w,h)——Draw a hollow rectangle;

clear

Rect(x,y,w,h)——Clear the specified rectangle;

canvas{
            border:medium double black;
            margin: 4px;
        }
        body > *{
            float: left;
        }

3) Set canvas drawing status:

li neWidth——Get or set the width of the line (default value is 1.0);

lineJoin——Get or set The style when the line is connected to the graphic (default value is miter);

fillStyle——Get or set for solid The style of the graphic (default value is black);

strokeStyle - Gets or sets the style used for lines (default value is black );

4) Use gradient

createLinearGradient (x0,y0,x1,y1)——Create a linear gradient and return a CanvasGradient object;

createRadialGradient(x0,y0,r0,x1,y1,r1 )——Create a radial gradient and return a CanvasGradient object;

CanvasGradient object

Methods:

## addColorStop(b1800b44144ee7173e7301cfcc14a51f,b10fb37415d019cfffa8c4d7366c607f)——Add a gradient line to the gradient A solid color;

rrree

5）使用图案

createPattern(34c7464b2671d69876f543c6f5a9f73c,int2)——创建图案，指定图案文件的来源和重复方式；

int2的值是指定重复样式：分别有repeat、repeat-x、repeat-y、no-repeat;

6)保存和恢复状态

save()——保存绘制状态属性的值，并把它们推入状态栈；

restore()——取出状态栈的第一组值，用它们来设置绘制状态；

7）绘制图像

drawImage方法——在画布上绘制图像，指定一个img、canvas或video元素作为来源；

The above is the detailed content of Detailed explanation of code examples for getting started with HTML5 canvas (picture). For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Detailed code explanation of HTML5 canvas advanced code (picture)Next article：Detailed code explanation of HTML5 canvas advanced code (picture)

See more

Detailed explanation of code examples for getting started with HTML5 canvas (picture)

Related articles