Recently, because of the job needs, so learned the HTML of the canvas label.
When I read the tutorial and wrote a Hello World, the trouble arose. Look at the following code:
<!DOCTYPE HTML><HTMLLang= "en"><Body><CanvasID= "CANVAS1"style= "width:200px;height:200px; border:1px solid black;"></Canvas><Script> varOC=document.getElementById ('CANVAS1'); varCTX=Oc.getcontext ("2d"); Ctx.moveto (0, 0); Ctx.lineto (2xx, 2xx); Ctx.stroke ();</Script></Body></HTML>
The meaning of the above code is to draw a line on a canvas with width and height of 200px, the starting point of the line is (0,0) and the end point is (200,200);
However, the images drawn by the browser are:
Look at this figure ~ How is such a slope? should not AH ~ should be a diagonal just right ah ~ ~
Later on the data to know that the canvas label setting width and height, there are several ways and the consequences:
The canvas element defaults to a width of 300px and a height of 150px, and the following methods can be used to set its width height:
Method One:
1 <canvas width= "height=" $amp;>amp; $lt;/canvas>
Method Two: Use the HTML5 Canvas API to operate
1 var canvas = document.getElementById (' ID to manipulate canvas ');
2 canvas.width = 500;
3 Canvas.width = 500;
If you set the width height by the following method, the canvas element will be stretched from its original size to the width height set :
Method one: Using CSS will be stretched
1 #欲操作canvas的id {
2 width:1000px;
3 height:1000px;
4}
Also contains the style= "" in the inline style. That is, the example above also produces a stretching situation.
Method Two: Using the HTML5 Canvas API operation will be stretched
1 var canvas = document.getElementById (' ID to manipulate canvas ');
2 Canvas.style.width = "1000px";
3 Canvas.style.height = "1000px";
Method Three: $ ("#id") with jquery. Width (500); will be stretched
Other: the width and height of canvas cannot be expressed as a percentage. The canvas will display the score as a numeric value
So, with the above information, the reason is that the code in my example above would have stretched the width of the canvas, making the image inconsistent with what was expected.
Now I've rewritten a code example that correctly sets the canvas's wide-height size:
<!DOCTYPE HTML><HTML><Body><CanvasID= "MyCanvas"width= "$"Height= "$"style= "border:1px solid black;">Your Browser does not support the canvas element.</Canvas><Scripttype= "Text/javascript"> varC=document.getElementById ("MyCanvas"); varCXT=C.getcontext ("2d"); Cxt.moveto (0, 0); Cxt.lineto ( $, $); Cxt.stroke ();</Script></Body></HTML>
Results:
End.
Canvas setting width and height problem!
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
