canvas绘制图形与设置的不一致

问题：设置canvas的style的width和height的值为60px；fillrect（0，0，60，60）；绘制出来的图形是不完全的。且通过js打印canvas.width和canvas.height为300和150，在开发者工具中查看 Canvas 元素的宽度和高度为 60px

原因：开发者工具显示的是 CSS 指定的样式尺寸。而通过 JavaScript 获取的 Canvas 宽度和高度为 300px 和 150px 是 Canvas 元素的实际像素尺寸。

为什么样式尺寸会和实际像素尺寸不一致?

样式尺寸和实际像素尺寸不一致的原因可能是由于设备像素比（Device Pixel Ratio，简称 DPR）导致的。设备像素比是指物理像素和 CSS 像素之间的比例关系。在高分辨率屏幕上，一个 CSS 像素可能对应多个物理像素，这样可以在保持相同的物理尺寸的情况下显示更多的细节。

例如，对于一个设备像素比为 2 的设备，一个 CSS 像素可能对应 2 个物理像素。这意味着如果你在 CSS 中设置一个元素的宽度为 100px，而这个元素在设备像素比为 2 的设备上显示，那么它的实际像素宽度将为 200px（100px * 2）。

Canvas 元素也受到设备像素比的影响。当你在 CSS 中设置 Canvas 的样式尺寸时，浏览器会根据设备像素比来确定实际的像素尺寸。而通过 JavaScript 获取的 Canvas 宽度和高度通常代表的是 Canvas 元素的实际像素尺寸。

为了解决这个问题，你可以通过 JavaScript 显式设置 Canvas 元素的像素尺寸，以确保它与 CSS 指定的尺寸一致。你可以在设置完样式尺寸后，通过设置 canvas.width 和 canvas.height 来指定 Canvas 的像素尺寸，如下所示：

canvas.width = 300; canvas.height = 150;

注意不是canvas.style.width!

这样就可以确保开发者工具中查看的 CSS 尺寸和 JavaScript 获取的像素尺寸一致了。