Canvas drawing clock
Two days ago, I wrote a clock on canvas. Put on the page, the effect is as follows, at first glance there is no problem, very good; Very normal!! After all, it’s not a professional world where you submit code and get requirements done;
Bad news came today, UI feedback that the clock is a bit sticky! It’s kind of burnt!! Paste!!!!!!
Which paste ？？？？
I use canvas stroke by stroke, can directly generate pictures, how can paste? Is canvas divided into 3 times and 2 times?
But since the UI feedback, that is certainly to check. After all, there is no evidence is not good [argue] is not 😄
I then asked UI browsers, environments, computers, and other scenarios that might cause this flaw.
In the end, the canvas will be “blurry” when locked under the Mac Retina screen. I don’t know what “paste” means, but UI says this phenomenon is “paste”.
Replay the scenario to solve the problem
Because I have done mobile H5 page before, there is something called DPR in it;
Later, I found that devicePixelRatio is defined as the ratio of the physical pixel resolution of the display device to the pixel resolution of the CSS.
DPR: When DPR =1 is set to 1px, 1px will appear in the browser. When DPR =2 is set to 1px it will display 2px in the browser; When DPR =3 is set to 1px it will display 3px in the browser;
So the first question is whether the PC will also have this DPR
Luckily, devicePixelRatio happens to be here; Really lucky mother to lucky door — lucky home;
According to the chestnuts;
Lot code
Optimized renderings
Sure enough, it’s much clearer. Thumbs up to the UI designer
The statement
The method only worked with Google chrome on Macs; For other browser compatibility, please check it by yourself
reference
HTMLCanvasElement
devicePixelRatio