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

This article mainly explains "how to solve the canvas fuzzy problem under the high score screen". The content 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 "how to solve the canvas fuzzy problem under the high score screen".

Preface

Recently, when I was working on a project, I found that there was no problem on the company computer, but there was a problem on my own computer. What I am doing is a canvas project, and when I run it on my computer, I find that there will be problems that can not be selected by clicks, and that there will be residual shadow problems in canvas refresh. First of all, I can be sure that both of these problems are canvas element boundary problems, but from a code point of view, there is no problem, so I guess whether it has something to do with the screen, after all, some problems with canvas do have something to do with the screen or even the hardware graphics card.

DevicePixelRatio attribute

Sure enough, I found a different attribute: devicePixelRatio.

Then take a closer look at the meaning of this attribute, which is explained on mdn:

This property returns the ratio of the physical pixel resolution of the current display device to the CSS pixel resolution. This value can also be interpreted as the ratio of pixel size: that is, the ratio of the size of an CSS pixel to the size of a physical pixel.

The devicePixelRatio of the company's desktop is 1, while my own computer is 1.25; because my computer has a high-definition screen, what is a high-definition screen?

The principle of the HD display is as follows:

An LCD screen with ultra-high pixel density

The number of pixels displayed on a screen of the same size has changed from one to multiple.

Then we can know that one pixel on the HD screen becomes devicePixelRatio pixels, so the canvas canvas will also be affected, and the same picture will get bigger on the HD screen, but the actual size of the canvas will not become larger, because the picture will be scaled, resulting in blur.

Width and height of canvas and width and height of css

So how to solve the problem of canvas high-resolution screen? Since there will be more pixels in the canvas under the high split screen, causing the canvas to zoom, can we zoom back the canvas in some way? The answer is yes.

Let's first take a look at the pixels of canvas, and let's draw a paragraph of text:

.. ctx1.beginPath (); ctx1.font = '20px arial';ctx1.fillText (' Html5 canvas', 50,50)

We are creating a canvas, and this time we set the width and height of the canvas through css:

.ctx2.beginPath (); ctx2.font = '20px arial';ctx2.fillText (' Html5 canvas', 50,50)

We can clearly see that the text on the canvas is obviously scaled. Why? We can understand it this way: canvas draws pictures. After we draw pictures with canvas, we first generate a picture according to the width and height of canvas, and then render it by css through the dom tree, so the width and height of canvas is the actual width and height of the picture, and the width and height of css is the actual rendered size. So let's go back to understanding devicePixelRatio. This property returns the ratio of the device's physical pixel resolution to the CSS pixel resolution. After our canvas is drawn, the picture becomes larger due to the influence of the HD screen device, but our rendering window in the browser does not get larger, so the image will be squeezed and scaled so that the canvas canvas will become blurred, although there are more pixels on the high-resolution screen, resulting in a larger picture. Then we can set the canvas size of devicePixelRatio times by setting the width and height of canvas, and then set the canvas zoom ratio to devicePixelRatio times, keeping the magnification equal to canvas, so that we are equivalent to zooming the picture larger when drawing the picture, and then zooming back through css rendering, so that the size of the canvas will not be distorted. The code is as follows:

Function makeHighRes (canvas) {var ctx = canvas.getContext ('2d'); / / Get the device pixel ratio, falling back to 1. Var dpr = window.devicePixelRatio | | window.webkitDevicePixelRatio | | window.mozDevicePixelRatio | | 1; / / Get the size of the canvas in CSS pixels. Var oldWidth = canvas.width; var oldHeight = canvas.height; / / Give the canvas pixel dimensions of their CSS / / size * the device pixel ratio. Canvas.width = Math.round (oldWidth * dpr); canvas.height = Math.round (oldHeight * dpr); canvas.style.width = oldWidth + 'px'; canvas.style.height = oldHeight +' px'; / / Scale all drawing operations by the dpr, so you / / don't have to worry about the difference. Ctx.scale (dpr, dpr); return ctx;}

In addition: there are some old solutions on the Internet, using the backingStoreRatio attribute, which has been abandoned!

In addition, we can also use this library hidpi-canvas-polyfill, he also uses our method to change the canvas drawing view, but the library also zooms all canvas drawing api to the corresponding devicePixelRatio times, which is well considered.

Thank you for your reading, the above is the content of "how to solve the canvas fuzzy problem under the high-resolution screen". After the study of this article, I believe you have a deeper understanding of how to solve the problem of canvas blurring under the high-resolution screen, 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.