Canvas画图，canvas饼图模糊

最新推荐文章于 2024-08-06 10:12:26 发布

原创最新推荐文章于 2024-08-06 10:12:26 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #html

本文探讨了在HTML5 Canvas中绘制饼图时遇到的模糊问题，并提出了一种解决方案：通过调整父元素缩放比例和在绘制时放大canvas来提高图像质量。代码示例显示了如何使用CSS的`zoom`属性和`canvas`的`scale`方法实现这一方法，从而获得更清晰的饼图效果。

Canvas是Html5制图中常用的元素，但其本身并没有绘制能力，它仅仅是图形的容器，要制图还必须依靠脚本。按照Canvas中提供的方法，我们绘制出各种我们想要的图形。

在绘制canvas饼图时发现绘制的饼图很是模糊

使用过hidpi-canvas-polyfill库，但效果不佳。

想到了一个类似手机分比率的方法，将父元素宽高缩小两倍，绘制中canvas放大两倍

接下来直接上代码

<!DOCTYPE html>
<html>
<head>
  <style>
   .container{
     zoom:0.5;//将canvas缩小两倍，也可以使用transform:scale(0.5,0.5)
   }
  </style>
</head>
<body>

<div class="container">
  <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
  </canvas>
</div>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.scale(2,2);//（绘制时放大canvas）
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.arc(200,150,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();

</script> 

</body>