在项目开发中发现，canvas有一个问题，绘制的图会出现模糊现象。
解决方法之一：将canvas元素放大2倍，然后将整个canvas元素或者其父元素缩小两倍。
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.fillStyle = "yellow"; ctx.arc(200, 150, 100, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <style> .box { zoom: 0.5; } </style> </head> <body> <div class="box"> <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> </div> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.scale(2, 2); // 放大2倍 ctx.beginPath(); ctx.fillStyle = "yellow"; ctx.arc(200, 150, 100, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); </script> </body> </html>
