HTML5 Canvas像素大小是否取决于画布大小？

Question

我正在使用HTML5画布绘制简单的线条：

context = $('canvas')[0].getContext('2d');
context.moveTo(150, 20);
context.lineTo(300, 20);
context.stroke();

当我的画布CSS改为：

时

canvas {
    width: 500px;
    height: 500px;
}

到

canvas {
    width: 1000px;
    height: 1000px;
}

笔划的宽度和高度也加倍！是什么给了什么？

Answer 1

CSS仅确定其可见大小。更改HTML中的width和height属性，以调整构成它的实际像素数。如果在HTML中它是100x100，而在CSS 200x200中，它将在视觉上缩放2倍。

Answer 2

在这里回答：Resize HTML5 canvas to fit window