计算公式: 原始尺寸 = 样式尺寸 * 缩放倍率
比如 缩放倍率 是固定的 3 则计算公式如下
保留原始尺寸不变，样式尺寸降低3倍
保留样式尺寸不变，原始尺寸提升3倍
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas {
width: 200px;
height: 200px;
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
<!-- 原始尺寸 = 样式尺寸 * 缩放倍率-->
/* 比如 缩放倍率 是固定的 3
* 保留原始尺寸不变，样式尺寸降低3倍
* 保留样式尺寸不变，原始尺寸提升3倍
* */
let cvs = document.getElementById('canvas')
let ctx = cvs.getContext('2d');
function init() {
// 原始尺寸 我这里改变是原图尺寸，还可以修改样式尺寸
cvs.width = 200 * devicePixelRatio;
cvs.height = 200 * devicePixelRatio;
}
init();
ctx.beginPath();
// arc参数(x, y, radius, startAngle, endAngle, anticlockwise);
// x 圆弧中心（圆心）的 x 轴坐标。
// y 圆弧中心（圆心）的 y 轴坐标。
// radius 圆弧的半径。
// startAngle 圆弧的起始点，x 轴方向开始计算，单位以弧度表示。
// endAngle 圆弧的终点，单位以弧度表示。
// anticlockwise 可选的Boolean值，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。
ctx.arc(cvs.width / 2, cvs.height / 2, 80 * devicePixelRatio, 0, 2 * Math.PI);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 10 * devicePixelRatio;
ctx.stroke();
</script>
</body>
</html>
