版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012863664/article/details/53484263
最近在做一个转盘抽奖页面, 然后转盘是使用HTML5的canvas元素画出来的. 然而在几个手机上测试都发现转盘有一点锯齿问题, 而且文字都比较模糊. 除了在上面的canvas标签中设置了width="422px",height="422px"之外, 还在外部链接的CSS样式表中设置了该canvas的宽度为100%, 公司的"导师"告诉我, 这个应该是手机的宽是720像素的, 而这个canvas是按照422像素画出来的, 所以在720像素的手机上显示时, 这个canvas的内容其实是经过拉伸的, 所以会出现模糊和锯齿. 解决方案就是把canvas的行间样式的宽度设为手机端的最大像素值, 因为现在的手机端宽度的最大的只有1080像素宽, 所以我就把canvas的宽度设为422的4倍也就是1688像素, 按照这个像素画完之后, width:100%又会把canvas的宽度缩小至父元素的宽度那么大, 因此整个canvas的宽度被缩小了, 大尺寸的canvas内容被缩小了之后肯定不会产生锯齿现象, 所以这个解决方案也是可以的.