FunctionDraw (){VaRDobj = Document. getelementbyid ("tubar");VaRCobj = dobj. getcontext ("2D"); Cobj. fillstyle= "Rgba (0.5, 0, 0 )"Cobj. fillrect (30, 30, 100,100); Cobj. strokerect (45, 45, 70, 70); Cobj. clearrect (50, 50, 60, 60);}
<Body onload = "Draw ();">
<Canvas id = "canvas" width = "150" Height = "150"> </canvas> <br>
</Body>
Cobj. fillstyle = "rgba (0.5, 0, 0,)": defines the color and transparency of the canvas object;
Cobj. fillrect (30, 30, 100,100): draws a rectangle,
The coordinate value is relative to the upper left point of the canvas, with the X axis moving 30px and the Y axis moving 30px. The height setting is 100px and the width setting is 100px;
Cobj. strokerect (45, 45, 70, 70): Draw a rectangular box (hollow inside ),
The coordinate value is relative to the upper left point of the canvas. the X axis is 45px, And the Y axis is 45px. The height is 100px, and the width is 100px;
Cobj. clearrect (50, 50, 60, 60); draw a rectangle and "empty" A Place in the rectangle of cobj. fillrect ";
The coordinate value is relative to the upper left point of the canvas, with the X axis moving 50px and the Y axis moving 50px; the height setting is 100px; and the width setting is 100px;
For example, red is a rectangle, Black is a box, and white is "empty"
Formula for white blank and black wireframes positioned in the vertical center of Red:
Abscissa = (width of the outer rectangle-width of the center element)/2 + abscissa of the outer rectangle
[Example above: Black Box X-axis: 45 = (100-70)/2 + 30]
Ordinate = (height of the outer rectangle-height of the center element)/2 + ordinate of the outer rectangle
[Example above: Black Box ordinate: 45 = (100-70)/2 + 30]
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
