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倍.