为什么我的HTML5矩形会放大？

Question

在http://www.html5canvastutorials.com/tutorials/html5-canvas-rectangles/之后,我在画布上并排绘制了一些矩形.问题是它们看起来大大放大了; 它们的缩放比例为1.0,大约是原始尺寸的五倍; 它们看起来尺寸正确(如果边界模糊),缩放大约0.16.

我希望通过使画布的像素尺寸更大并缩小来获得解决方法,但是在画布上获得1:1缩放的正确方法是什么？画布的宽度和高度设置为100%,主体的边距为0.手动将画布的宽度和高度设置为窗口的高度和宽度不会改变此行为.

TIA,

Answer 1

问题是,您为画布设置样式的宽度和高度.您需要设置width和height属性,而不是css样式.像这样的东西:

<canvas id='mycanvas' width='800' height='600'></canvas>

更多类似问题的信息:使用CSS时画布被拉伸但是"宽度"/"高度"属性正常