我一直在尝试制作一个包含画布的响应网站。
在绘制圆形进度条时，我调用了弧（）函数，但它的半径参数看起来需要以像素为单位，但我需要它作为百分比、vw、vh、em或任何其他单位css建议。
当然，我可以用像素来渲染它，并使用CSS来拉伸它，但它要么被放大和像素化，要么被缩小并浪费资源，要么被扭曲。
我该怎么做呢？
经过一番搜索，我偶然发现了这个问题，它帮助我解决了这个问题。
我是这样做的：
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 的解决方案
我现在正在做一些事情，我必须解决完全相同的问题（即以百分比或ems为单位设置CanvasRenderingContext2D. arc（）的半径值）。
这是我的解决方案的JavaScript代码：
function percentToPixelParentBased(percent, element, width_based=true) {
return percentToPixelElementRelative(percent, element.parentElement, width_based);
}
function emToPixelParentBased(em_value, element) {
return emToPixelElementRelative(em_value, element.parentElement);
}
function percentToPixelElementRelative(percent, element=false, width_based=true) {
if (element) {
if (width_based) {
var dimension = element.style.width || element.offsetWidth;
} else {
var dimension = element.style.height || element.offsetHeight;
}
} else {
if (width_based) {
var dimension = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
} else {
var dimension = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
}
var pixels_in_percent = dimension / 100;
return pixels_in_percent * percent;
}
function emToPixelElementRelative(em_value, element=false) {
var font_size = getFontSize(element);
var ppi = getPPI();
var px_in_pt = 72 / ppi; /* 1pt is 1/72 of an inch */
var value_in_pt = em_value * font_size;
return value_in_pt * px_in_pt;
}
function getFontSize(element=false) {
if (element) {
return parseFloat(getComputedStyle(element).fontSize);
} else {
/* getting font size from body */
return parseFloat(getComputedStyle(document.body).fontSize);
}
}
function getPPI() {
var inch_div_html = "<div id='inch-div' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>";
document.body.insertAdjacentHTML( 'afterbegin', inch_div_html);
var device_pixel_ratio = window.devicePixelRatio || 1;
var ppi_test_div = document.getElementById('inch-div');
var ppi = ppi_test_div.offsetWidth * devicePixelRatio;
document.body.removeChild(ppi_test_div);
return ppi;
}
稍微戳一下，JSFiddle上有一个演示。
现在，有一些解释/备注：emToPixelElementRelative和percentToPixelElement Relative每个都将传递给它的值转换为第一个参数em=
percentToPixelParentBased 和 emToPixelParentBased 只是 percentToPixelElementRelative 和 emToPixelElementRelative 的包装器，它们基于传递元素的父级进行转换。
getFontSize 返回传递的元素的字体大小，或者
< code>getPPI通过本答案中提到的某种方式获取当前PPI，它接受单个参数(< code>width_based)来指示是基于宽度(如果< code>true - default)还是高度(如果< code>false)进行计算。
还要注意，我已经基于< code>em=
pt（基于本文）1em等于pt中当前字体的大小（基于pxtoem.com和此答案）问题(当然还有问题的答案)/资源，它们帮助我整合了这个解决方案:
