Recently, due to work needs, I learned about the Canvas tag in Html.
Canvas is a new component of HTML5. It is like a curtain on which various charts, animations, etc. can be drawn using JavaScript.
In the era before Canvas, drawing could only be achieved with the help of Flash plug-ins, and pages had to use JavaScript and Flash to interact. With Canvas, we no longer need Flash and can directly use JavaScript to complete drawing.
The trouble started when I wrote a hello world myself after watching the tutorial. Look at the code below:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px solid black;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); ctx.moveTo(0, 0); ctx.lineTo(200, 200); ctx.stroke();</script></body></html>
The meaning of the above code is to draw a straight line on a canvas with a width and height of 200px each. The starting point of the straight line is (0,0) and the end point is (200,200);
However, the image drawn by the browser is:
Take a look at this picture~ Why is it such a slope? It shouldn’t be~ It should be a diagonal line~~
Later, after searching for information, I found out that when setting the width and height of the canvas tag, there are the following methods and consequences:
The default width of the Canvas element is 300px and the height is 150px. To set its width and height, you can use the following method:
Method one:
1 <canvas width=500 height=500$amp;>amp;$lt;/canvas>
Method 2: Use HTML5 Canvas API operation
1 var canvas = document.getElementById('the id of the canvas to be operated');
2 canvas.width = 500;
3 canvas.width = 500;
If the width and height are set by the following method, the Canvas element will be stretched from the original size to the set width and height:
Method 1: Using CSS will stretch the
1 #To operate the canvas id{
2 width:1000px;
3 height:1000px;
4 ｝
Also includes style= in inline styles. That is, in the above example, stretching will also occur.
Method 2: Operations using the HTML5 Canvas API will be stretched
1 var canvas = document.getElementById('the id of the canvas to be operated');
2 canvas.style.width = 1000px;
3 canvas.style.height = 1000px;
Method 3: Using jquery’s $(#id).width(500); will be stretched
Others: The width and height of canvas cannot be expressed as percentages. canvas will display the percentage as a numerical value
Therefore, from the above information, we can know that the reason is that the code in my example above will stretch the width and height of the canvas, making the image inconsistent with expectations.
Now I have rewritten a code example to correctly set the width and height of the canvas:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> Your browser does not support the canvas element.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.moveTo(0, 0); cxt.lineTo(200, 200); cxt.stroke();</script></body></html>
result:
Finish.
SummarizeThe above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message for communication. Thank you for your support of VeVb Wulin Network.