Comments: The actual size of the canvas when width and height are written on the canvas. By default, width is 300px and height is 150px. Next, we will introduce it in detail, if you are interested, refer to the actual size of the canvas when width and height are written on the canvas. By default, width is 300px and height is 150px.
When the css style is written in the style, the widht and height are the actual display size.
Now we use canvas as an example to draw a diagonal line.:
The Code is as follows:
<! DOCTYPE html>
<Head>
<Meta charset = UTF-8/>
<Title> canvas </title>
<Script type = 'text/javascript '>
Window. onload = function (){
GetCanvas ();
};
// Canvase plotting
Function getCanvas (){
// Obtain the canvas Element and Its Drawing Context
Var canvas = document. getElementById ('canvasid ');
Var context = canvas. getContext ('2d ');
// Use absolute road signs to create a path
Context. beginPath ();
Context. moveTo (0,200 );
Context. lineTo (200,0 );
// Draw this line to the canvas first
Context. stroke ();
}
</Script>
</Head>
<Body>
<Canvas id = 'canvasid' width = "200px" height = '200px 'style = 'width: 400px; height: 200px;'> </canvas>
</Body>
</Html>
The display effect is as follows:
As you can see, the canvas is a square of 200*200, and the drawing is displayed on the diagonal line from (0,200).
However, when the image is displayed, It is a rectangle of 400*200 and displays a diagonal line.
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
