HTML5 canvas (rectangle), html5 canvas rectangle
The canvas element is used to draw a graph.
The canvas element is an important new element in HTML5. The element itself is not capable of drawing, and all the painting work must be completed inside javascript.
Case 1:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Script>
Function draw (){
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("2d ");
Cxt. fillStyle = "green ";
Cxt. fillRect (350,260 );
Cxt. fillStyle = "red ";
Cxt. fillRect (50, 50, 100,100 );
Cxt. strokeStyle = "blue ";
Cxt. strokeRect (110,110,100,100)
Cxt. lineWidth = 1;
}
</Script>
</Head>
<Body onload = "draw ();">
<Canvas id = "myCanvas" width = "400" height = "300">
:
Note:
(1) The getContext ("2d") object is a built-in HTML5 object. It can draw multiple types of images, such as paths, rectangles, and circles;
(2) There are two ways to draw a graph: fill and stroke );
Example: cxt. fillRect (x, y, width, height );
Cxt. strokeRect (x, y, width, height );
(3) fillStyle-fill style, such as color value;
StrokeStyle -- border style, such as color value;
(4) lineWidth: Specify the line width;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
