canvas绘图出现模糊，解决方法

最新推荐文章于 2023-06-02 17:57:02 发布

weixin_30414155

最新推荐文章于 2023-06-02 17:57:02 发布

阅读量514

点赞数

原文链接：http://www.cnblogs.com/wanf/p/10250144.html

版权

在项目开发中发现，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>

转载于:https://www.cnblogs.com/wanf/p/10250144.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30414155

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘图出现模糊，解决方法

在项目开发中发现，canvas有一个问题，绘制的图会出现模糊现象。解决方法之一：将canvas元素放大2倍，然后将整个canvas元素或者其父元素缩小两倍。<!DOCTYPE html><html><body> <canvas id="myCanvas" width="400" height="300" style="bord...
复制链接

扫一扫