javascript - How to eliminate jagged edges of canvas
大家讲道理
大家讲道理 2017-05-31 10:41:27
0
2
1052

Such as the title: I made a canvas graphic and the edges were jagged


I found one: Bicubic Interpolation interpolation algorithm, but I can’t understand it, please give me some advice
Orz!!

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(2)
phpcn_u1582

You can try doubling the canvas resolution first and take a look.
Assume the display size is w * h:

  1. Set the width and height of canvas to 2w and 2h

  2. Set the width and height in the canvas style to w and h

大家讲道理

I looked at some better plug-ins, such as echarts (Baidu Charts), but I couldn’t read more than 10,000 lines of code. Finally, I found a solution
https://www.zhihu.com/questio...
let width = canvas.width,height=canvas.height;
if (window.devicePixelRatio) {

            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            canvas.height = height * window.devicePixelRatio;
            canvas.width = width * window.devicePixelRatio;
            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

}
I would like to share this with children’s shoes who encounter the same problem

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template