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>