Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to solve the blur of drawing pictures with canvas

2025-01-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly explains "using canvas to draw picture blur how to solve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "using canvas to draw picture blur how to solve" it!

Fuzzy cause

First of all, you need to understand the presentation mechanism of canvas.

I drew a 375px canvas,iphone6 with a width of 375px and okCoGe canvas spread all over the screen.

So the size of canvas is 375px canvas canvas, which is similar to a picture, a picture of 375px, and we can just look at it as a picture. I, Tsim Sha Tsui Duan Kwan said.

If you encounter a phone with a screen width of 400px, the picture will stretch, the canvas will stretch, and the stretch will inevitably blur.

So the iphone6 is indeed a 375px-wide phone, or there will be ambiguity problems, why? There will be problems with high-definition screens on mobile phones. That is, what we call 2x screen or 3x screen, also known as screen DPI. When drawing the interface, the HD screen will render the width of 2px as 1px, which will achieve the effect of HD. In other words, the 375px we see under the high-definition screen is actually drawn by 750 pixels, while the canvas is actually stretched to the 750px and then displayed, and the stretching is bound to be blurred.

All right, the reason for the blur is known, in fact, it is the trouble caused by the high-definition screen, how to solve it?

Solution method

If it is a double screen, won't we solve the problem if we draw the canvas of 375px on the design drawing as 750px?

Set canvas styl

Here we don't write width and height, we just write style. Think of it as a picture, let's first let it spread all over the screen regardless of the original width and height of the picture, whether stretched or compressed. The width and height written in style is not the original width and height of the picture, that is, the width and height written in style is not the true width and height of canvas:

Set canvas width and height

The style above is not the true width and height of canvas, so how do we set its width and height?

If the ordinary screen, 2x screen and 3x screen fit separately?

Let canvas = document.querySelector ('# map'); / / getting the screen is several times the screen. Let getPixelRatio = function (context) {var backingStore = context.backingStorePixelRatio | | context.webkitBackingStorePixelRatio | | context.mozBackingStorePixelRatio | | context.msBackingStorePixelRatio | | context.oBackingStorePixelRatio | | context.backingStorePixelRatio | | 1; return (window.devicePixelRatio | | 1) / backingStore;}; 2 const pixelRatio = getPixelRatio (canvas) under / / iphone6; / / set the true width and height of canvas canvas.width = pixelRatio * canvas.offsetWidth; / / want to be 2 * 375 = 750canvas.height = pixelRatio * canvas.offsetHeight

Then the width and height of canvas becomes the following picture, 750W canvas, if you are 2 times the screen, I can just adapt!

Width and height after setting

Start drawing dots.

For example, on the design drawing of 375, there is a dot with a radius of 2px, and the position of the point is XRV 100.

So now the width of the canvas is 750, and the width and height is twice as high as before. In order to keep the visual position unchanged, the position of the point we draw should be xRule 100 pixel pixel Ratio.

The complete code is as follows:

Let canvas = document.querySelector ('# map'); / / getting the screen is several times the screen. Let getPixelRatio = function (context) {var backingStore = context.backingStorePixelRatio | | context.webkitBackingStorePixelRatio | | context.mozBackingStorePixelRatio | | context.msBackingStorePixelRatio | | context.oBackingStorePixelRatio | | context.backingStorePixelRatio | | 1; return (window.devicePixelRatio | | 1) / backingStore;}; 2 const pixelRatio = getPixelRatio (canvas) under / / iphone6; / / set the true width and height of canvas canvas.width = pixelRatio * canvas.offsetWidth; / / want to be 2 * 375 = 750canvas.height = pixelRatio * canvas.offsetHeight / / start drawing let ctx = canvas.getContext ("2d"); ctx.beginPath (); / / 375The position and size on the design should be * pixelRatio because our current canvas is 750ctx.arc (100*pixelRatio, 100*pixelRatio, 2*pixelRatio, 0,2 * Math.PI); ctx.fillStyle = "# fff"; ctx.fill (); ctx.closePath (); / /. Your other code thank you for reading, the above is "using canvas to draw pictures of how to solve the blur" of the content, after the study of this article, I believe that you use canvas to draw pictures of blur how to solve this problem has a deeper understanding, the specific use of the situation also need 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.

Views: 291

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report