Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the impact of the size of html and css in canvas on the vision of elements". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. please follow the editor's train of thought to study and learn "what is the impact of the size of html and css in canvas on the vision of elements".

For example, we draw a circle with a radius of 50px on a default 300px * 150px canvas.

Canvas size # canvas {width: 200px; height: 200px;} _ window.onload = function () {const canvas = document.getElementById ("canvas"); const ctx = canvas.getContext ("2d"); ctx.beginPath (); ctx.strokeStyle = "# aaaaaa"; ctx.arc (100,100,50,0,2 * Math.PI) Ctx.stroke (); ctx.closePath ();}

You can see that the graph is normal at this time. The size of the canvas is indeed the default 300 * 150.

From the comparison and imagination, we can draw a conclusion:

At first we drew a circle on a 300-150 canvas. After the painting is completed, we want to change the size of the canvas to 200, 200, while the canvas is the same as that canvas and will not be replaced.

The feasible way is to stretch the canvas through the line. Assuming that the canvas is elastic, a canvas stretches from 300 150 to 200 200. The long half axis of the circle on the canvas becomes 1.33 times the original, and the short half axis becomes 0.68 times. At this point, the circle is naturally an ellipse.

Thank you for your reading, the above is the content of "what is the impact of html and css size on element vision in canvas". After the study of this article, I believe you have a deeper understanding of what the impact of html and css size on element vision in canvas is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.