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

This article mainly introduces the relevant knowledge of "how to solve the problem of canvas rendering blur on the mobile side of html5". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to solve the fuzzy problem of canvas rendering on the mobile side of canvas on the mobile side of canvas" can help you solve the problem.

Before explaining the problem, you need to know a little bit about mobile display and cavans for later exploration. If you want to see the result directly, you can pull it to the end.

Some basic knowledge about the screen

Physical pixels (DP)

Physical pixels are also called device pixels. We often hear that the resolution of mobile phones is physical pixels. For example, the physical resolution of iPhone 7 is 750x1334. The screen is made up of pixels, that is, there are 750 pixels horizontally and 1334 pixels vertically.

Device Independent Pixel (DIP)

Also known as logical pixels, for example, Iphone4 and Iphone3GS are both 3.5in. The physical resolution of iphone4 is 640x980. while 3gs is only 320x480. if we draw an image with a width of 320px according to the real layout, there is only half of the content on the iphone4 and the other half is blank. In order to avoid this problem, we introduce logical pixels and set the logical pixels of both phones to 320px to facilitate rendering.

Device pixel ratio (DPR)

In the final analysis, the above device independent pixels are for the convenience of calculation. We unify the logical pixels of the device, but the physical pixel represented by each logical pixel is uncertain. In order to determine the relationship between physical pixels and logical pixels without scaling, we introduce the concept of device pixel ratio (DPR).

Device pixel ratio = device pixel / logical pixel DPR = DP / DIP

Some basic knowledge about canvas

Canvas draws a bitmap.

This is a knowledge point that everyone who has known canvas should know, and it is also the core of the problem that we will analyze next.

We will explain the bitmap later, now we just need to know that the image drawn by canvas is a bitmap.

Width and height properties of canvas

The width and height properties of canvas are very easy for beginners to get wrong. These two attributes are often confused with the width and height attributes in css.

For example, we have the following code (1):

Width and height in style represent the width and height occupied by the element canvas in the interface, that is, the width and height in style.

The width and height in attribute represent the width and height of the actual pixels of canvas.

If you can't understand it, imagine the following code (2):

The default width and height of canvas are 300 * 150. after setting css, canvas will scale according to the width and height of css (note that it is not cropped), which is the same as the img tag

The above code (1) can actually be interpreted in a more popular way, that is, one logical pixel is actually filled by two canvas pixels.

A preliminary discussion on the causes of vagueness

The above is a brief introduction to the basic knowledge required, and the following is a formal exploration.

First of all, we mentioned that bitmaps are used to draw images using canvas, and the jpg,png we usually use is also bitmaps. So what is a bitmap?

Bitmap, also known as pixel map or raster map, stores and displays the image by recording the color, depth, transparency and other information of each point in the image. Specifically, you can think of a bitmap as a huge jigsaw puzzle with countless pieces, each representing a solid pixel. In theory, one bitmap pixel corresponds to one physical pixel. But what if you use a high-definition screen, such as Apple's retina screen, to view a picture?

Suppose we have the following code, which will be displayed on the retina screen of iphone4:

The physical pixel of iphone4 itself is 640x980. while the device independent pixel is 320x480. this means that one css pixel is actually composed of four physical pixels. The pixel of canvas is 320x150and its css pixel is 320x150, which means that one css pixel will be made up of one canvas element. In this way, under the retina screen, one canvas pixel (or one bitmap pixel) will be filled with four physical pixels. Because a single bitmap pixel can not be further segmented, it can only be colored nearby, resulting in blurred image.

Behind the scenes-smoothing technology

The following is one of my big classmates to help me explain, we just said that each bitmap element is actually a solid color pixel. Now suppose we need to draw a number "0" on a normal screen with a css size of 4px * 4px dpr 1, then we should draw it like the following image, where 1 represents black pixels and 0 represents white pixels.

We can see that when the dpr is relatively small, our "0" pattern is still quite obvious. Now, if we keep the css size unchanged, but instead draw the image under the retina screen, what will the effect be like?

We know that under the retina screen, one css pixel represents four physical pixels. If we arrange the matrix directly according to the above matrix without any processing, and enlarge the matrix, we will find that under the retina screen, our pattern aliasing is very obvious, and the image obviously lacks a trace of smoothness.

Reason summary

Through the above explanation, now let's sum up the following conclusion: with the popularity of high-definition screens on mobile devices, css pixels of 1px actually represent four or more physical pixels. However, due to the problem of our code, our css pixel of 1px is equal to one canvas pixel, which leads to the fact that one canvas pixel actually needs to be filled with 4 or more physical pixels. In order to ensure the smooth processing of the image, the approximate value of the original color is used to fill the remaining physical pixels, which leads to the blur of the image.

Solution idea

Once you understand the cause of the problem, it is easy to solve the problem. The most important thing to solve the problem is to equate a canvas pixel with a physical pixel.

High-version browsers have a devicePixelRatio property under the window object, which is the dpr mentioned above.

We can do this when the width and height of the canvas element css is determined

Let canvas = document.getElementById ('canvas'); let ctx = canvas.getContext (' 2d'); let dpr = window.devicePixelRatio; / / suppose dpr is 2max / get the width and height of css let {width: cssWidth, height: cssHeight} = canvas.getBoundingClientRect (); / / expand the pixels of canvas canvas to make one canvas pixel equal to one physical pixel canvas.width = dpr * cssWidth;canvas.height = dpr * cssHeight according to dpr / / due to the expansion of the canvas, the canvas coordinate system also expands, so the drawing content will be reduced according to the original coordinate system / / so the drawing scale needs to be enlarged by ctx.scale (dpr,dpr). This is the end of the content on "how to solve the problem of canvas rendering blur on the mobile side of canvas on the mobile side of html5". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.