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

This article mainly introduces "how to solve the problems caused by canvas resizing under HD screen". In daily operation, I believe many people have doubts about how to solve the problems caused by canvas resizing under HD screen. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to solve the problems caused by canvas resizing under HD screen". Next, please follow the editor to study!

The first method is the cearRect function:

Context.cearRect (0century 0canvas.widthdepartment canvas.height)

The second way is to reset the width (or height) of the canvas with the original value.

Canvas.width = canvas.width// or canvas.height = canvas.height

The second method works because of a feature of canvas:

Whenever the height or width of the canvas is reset, the canvas content is emptied.

In a visualization project, we found that the effect is always confused on some computers.

After debugging, we found that it was caused by "canvas.width = canvas.width". There will be no problem under the normal screen, but if the screen is high definition, there will be a problem. This is because, under the HD screen, in order to deal with the problem of blurred drawing, we usually do the following:

Function setupCanvas (canvas) {let width = canvas.width, height = canvas.height, dpr = window.devicePixelRatio | | 1.0; if (dpr! = 1.0) {canvas.style.width = width + "px"; canvas.style.height = height + "px"; canvas.height = height * dpr; canvas.width = width * dpr Ctx.scale (dpr, dpr);}}

We know that the window.devicePixelRatio under the HD screen is greater than 1. So the brush is scaled before drawing:

Ctx.scale (dpr, dpr)

We know that cavnas is a state-based drawing component. The scaling value is also in state management. When we reset the width (height) of the canvas, we will not only empty the canvas content of the canvas, but also reset the drawing state to the original state, where the brush scale is 1, and the scale value is reset to 1, which leads to confusion in the drawing effect.

At this point, the study on "how to solve the problems caused by canvas resizing under the high-definition screen" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.