Html5-canvas labels-draw a rectangle

Source: Internet
Author: User
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]

 

 


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.