我想用 JavaScript 生成我的画布。通过“样式”调整大小是行不通的。 （我的代码中的选项“a”）为什么？
但是做到这一点的方法是使用canvas.width和.height（选项'b'）。默认尺寸为选项“c”。
<html>
<head>
<meta charset="utf-8">
<style>
canvas { outline:1px dotted black; }
</style>
</head>
<body>
<script>
"use strict";
let option = prompt('a, b, or c','a');
let canvas = document.createElement('canvas');
canvas.setAttribute('id','canvas');
switch(option) {
case 'a': // setting size with style - NG
canvas.setAttribute('style','width:500px; height:500px;');
break;
case 'b': // setting size with .width/.height - OK
canvas.width = 500;
canvas.height = 500;
break;
case 'c':
default: // default size
option = 'c';
}
document.body.appendChild(canvas);
let ctx = canvas.getContext("2d")
ctx.font = '20px Ariel';
ctx.fillText('Option: '+option,10,20);
ctx.arc(250,250,200, 0, 6.2832);
ctx.stroke();
</script>
</body>
</html>
您必须同时执行“a”和“b”才能使图像不失真 - 并且您还必须查看称为“设备像素比与后备存储的比例”的奇怪事物-pixel-ratio”神奇数字，因此它可以适当缩放并且不会模糊。
画布默认大小是不是正方形，所以如果你只用“a”或“b”将其设置为正方形，则通过其他选项它仍然是矩形，因此图像将被破坏。
这是我执行此操作的一些旧代码的片段：
const ctx = canvas.getContext("2d");
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
const ratio = dpr / bsr;
canvas.width = targetWidth * ratio;
canvas.height = targetHeight * ratio;
canvas.style.width = targetWidth;
canvas.style.height = targetHeight;
我多年前从另一个答案中得到了这个代码，但我不记得从哪里了。
希望这有帮助。