javascript - 2D Canvas : specify `arc()` radius units

Question

我一直在尝试制作一个包含 Canvas 的响应式网站。

在绘制圆形进度条时，调用 arc()函数，但它的半径参数看起来需要以像素为单位，但我需要它作为百分比、vw、vh、em 或 css 建议的任何其他单位。

当然，我可以以像素为单位渲染它并使用 CSS 拉伸(stretch)它，但它要么会放大并像素化，要么会缩小并浪费资源，或者会扭曲。

我该怎么做？

Answer 1

经过一番搜索，我偶然发现了 this question这帮助我解决了问题。

我是这样做的:

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

var vw = w/100;
var vh = h/100;

var pxradius = 50;
var vwradius = pxradius*vw;

不幸的是，我仍然没有解决百分比和ems