Canvas 如何提高画布中圆形图的分辨率

我在画布中使用了一个圆形图，流程如中所示 正如你们所看到的，当我放大页面时，圆圈变得模糊了。我想得到高分辨率的线路。如何在放大页面后使其不模糊。 我使用的Js代码如下所示：

$(document).ready(function(e) {

var el = document.getElementById('graph-1'); // get canvas
var options = {
percent:  el.getAttribute('data-percent')  ,
size: el.getAttribute('data-size') , /*|| 177*/
lineWidth: el.getAttribute('data-line') /*|| 4*/,
rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var paragrph = document.createElement('p');
var span = document.createElement('span');
span.textContent = options.percent + '%';


if (typeof(G_vmlCanvasManager) !== 'undefined') {
 G_vmlCanvasManager.initElement(canvas);
}

  var ctx = canvas.getContext('2d');
  canvas.width = canvas.height = options.size;

    el.appendChild(span);

    el.appendChild(canvas);

    ctx.translate(options.size / 2, options.size / 2); // change center
    ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

    //imd = ctx.getImageData(0, 0, 240, 240);
    var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
        percent = Math.min(Math.max(0, percent || 1), 1);
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
        ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
        ctx.lineWidth = lineWidth
        ctx.stroke();
};

drawCircle('#aeb4bb', options.lineWidth, 100 / 100);
drawCircle('#006bcf', options.lineWidth, options.percent / 100);

    });

HTML代码：

<div  id="graph-1" data-percent="85.25" data-size="177" data-line="7"> </div>

devicePixelRatio 您可以使用

window.devicePixelRatio

获取缩放量，并在出现缩放时使用

window.onresize

事件重新绘制（缩放更改窗口大小）

有关浏览器支持的信息，请参见

一小条 复制一些代码并进行修改，以演示如何通过

窗口.onresize

事件缩放到不同的像素比率

注意：ES6代码需要transpiler用于传统浏览器

//与应答无关的助手函数
const getElementDataSet=（el，data={}）=>{Object.keys（el.dataset）.forEach（key=>{data[key]=el.dataset[key]}）；返回数据}
const assignProps=（obj，props）=>{Object.keys（props.forEach（key=>obj[key]=props[key]）；}
const$=（name，props）=>{const el=document.createElement（name）；if（props）{assignProps（el，props）}返回el}
const_A$=（container，el）=>{container.appendChild（el）；返回el}
//与答案无关的辅助函数结束
//获取图形容器
常数el=图1；
//默认设置和获取选项
const options=getElementDataSet（el{
百分比：0，大小：100，线宽：5，旋转：0
} 
);
//创建元素并添加到图形容器
常量元素={
画布：A$（el，$（'canvas'，{width:options.size，height:options.size}）），
显示：A$（el，$（'div'，{textContent:options.percent+'%'）），
}
const ctx=elements.canvas.getContext（'2d'）；
函数resizeCanvas（）{
elements.canvas.style.height=elements.canvas.style.width=options.startSize+“px”；
elements.canvas.height=elements.canvas.width=options.size；
}
函数drawGraph（）{
函数drawCircle（颜色，百分比=选项百分比/100）{
ctx.setTransform（1,0,0,1，options.size/2，options.size/2）；
ctx.rotate（-1/2+options.rotate/180）*Math.PI）；//旋转-90度
变量半径=（options.size-options.lineWidth）/2；
百分比=数学最小值（数学最大值（0，百分比| 1），1）；
ctx.beginPath（）；
ctx.弧（0，0，半径，0，数学PI*2*百分比）；
ctx.strokeStyle=颜色；
ctx.lineCap='round'；//对接、圆形或方形
ctx.lineWidth=options.lineWidth
ctx.stroke（）；
};
常量比例=设备比例；
options.size=Math.floor（options.startSize*scale）；
options.lineWidth=数学地板（options.lineWidth*比例）；
调整画布的大小（）；
画圈（'#aeb4bb'，100）；
画圈（'006bcf'）；
};
//还记得开始时的可伸缩值吗
options.startSize=options.size；
options.lineWidth=options.lineWidth；
绘图（）；
//聆听调整事件大小并根据需要进行缩放
addEventListener（“调整大小”，drawGraph）
画布{
边框：2件纯黑；
}