Canvas画图，canvas饼图模糊

最新推荐文章于 2023-07-10 16:19:56 发布

前端小嘟

最新推荐文章于 2023-07-10 16:19:56 发布

阅读量157

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_45641978/article/details/120717886

版权

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

摘要由CSDN通过智能技术生成

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>

前端小嘟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas画图，canvas饼图模糊

Canvas是Html5制图中常用的元素，但其本身并没有绘制能力，它仅仅是图形的容器，要制图还必须依靠脚本。按照Canvas中提供的方法，我们绘制出各种我们想要的图形。在绘制canvas饼图时发现绘制的饼图很是模糊使用过hidpi-canvas-polyfill库，但效果不佳。想到了一个类似手机分比率的方法，将父元素宽高缩小两倍，绘制中canvas放大两倍接下来直接上代码<!DOCTYPE html><html><head> <style>
复制链接

扫一扫