Home > Web Front-end > H5 Tutorial > HTML5 Drawing a rectangle in canvas with renderings_html5 tutorial skills

HTML5 Drawing a rectangle in canvas with renderings_html5 tutorial skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-05-16 15:47:29
Original
1569 people have browsed it
1. Draw a rectangle

Canvas uses a coordinate system with the origin (0,0) in the upper left corner. The x coordinate increases to the right and the y coordinate increases downward.

Use the rectangle drawing function of the drawing environment to draw the rectangle.

fillRect(x,y,width,height): Draw a solid rectangle.
strokeRect(x,y,width,height): Draw a hollow rectangle.
clearRect(x,y,width,height): Clear the specified rectangular area to make it completely transparent.

2. Draw a rectangle in the canvas

Copy the code
The code is as follows :






HTML5





Tip: Your browser does not support the tag




3. Drawing Effect
Related labels:
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
Latest Issues
html5 validation for symfony 2.1
From 1970-01-01 08:00:00
0
0
0
The difference between HTML and HTML5
From 1970-01-01 08:00:00
0
0
0
html5 show hide
From 1970-01-01 08:00:00
0
0
0
Can PDF files run HTML5 and Javascript?
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template