我发现（对于 Chrome 和 Internet Explorer）是非常棘手、微妙的差异
-
canvas.width，和
canvas.style.width
它们不可互换。如果你想操纵它们，你必须非常小心地这样做才能达到你想要的。某些值以物理像素 衡量。其他的以逻辑像素（屏幕仍缩放到 96 dpi 时的像素）为单位。
就我而言，我希望Canvas 占据整个窗口。
首先以逻辑像素获取窗口的大小（我称之为“CSS像素”）：
//get size in CSS pixels (i.e. 96 dpi)
var styleWidth = window.innerWidth; //e.g. 420. Not document.body.clientWidth
var styleHeight = window.innerHeight; //e.g. 224. Not document.body.clientHeight
这些值在“逻辑像素”中。当我的浏览器放大时，“逻辑像素” 的数量会减少：
Zoom window.innerWidth x windows.innerHeight
==== ======================================
100% 1680 x 859
200% 840 x 448
400% 420 x 224
75% 2240 x 1193
然后你要做的是找出窗口的“真实”大小；应用缩放校正因子。目前我们将抽象出可以计算当前缩放级别的函数（使用 TypeScript 语法）：
function GetZoomLevel(): number
{
}
使用GetZoomLevel() 函数，我们可以计算窗口的真实大小，以“物理像素”为单位。当我们需要将画布的width和height设置为物理像素的窗口大小时：
//set canvas resolution to that of real pixels
var newZoomLevel = GetZoomLevel();
myCanvas.width = styleWidth * newZoomLevel; //e.g. 1680. Not myCanvas.clientWidth
myCanvas.height = styleHeight * newZoomLevel; //e.g. 859. Not myCanvas.clientHeight
关键技巧是在内部，画布将渲染到大小为width 乘以height 像素的表面。渲染完成后，CSS 可以出现并缩小或拉伸您的画布：
- 如果 CSS 使其变大，则将其模糊
- 如果 CSS 使像素数据变小，则丢弃像素数据。
最后一步是调整画布的大小，使其占据整个客户区窗口，使用 CSS 长度 String：
myCanvas.style.width = styleWidth + "px"; //e.g. "420px"
myCanvas.style.height = styleHeight + "px"; //e.g. "224px"
因此画布将在您的浏览器窗口中正确定位和调整大小，但在内部使用完整的“真实”像素分辨率。
GetZoomLevel()
是的，您需要缺少的部分，GetZoomLevel。不幸的是，只有 IE 提供信息。同样，使用 TypeScript 表示法：
function GetZoomLevel(): number {
/*
Windows 7, running at 131 dpi (136% zoom = 131 / 96)
Internet Explorer's "default" zoom (pressing Ctrl+0) is 136%; matching the system DPI
screen.deviceYDPI: 130
screen.systemYDPI: 131
screen.logicalYDPI: 96
Set IE Zoom to 150%
screen.deviceYDPI: 144
screen.systemYDPI: 131
screen.logicalYDPI: 96
So a user running their system at 131 dpi, with IE at "normal" zoom,
and a user running their system at 96 dpi, with IE at 136% zoom,
both need to see the same thing; everything zoomed in from our default, assumed, 96dpi.
http://msdn.microsoft.com/en-us/library/cc849094(v=vs.85).aspx
Also note that the onresize event is triggered upon change of zoom factor, therefore you should make sure
that any code that takes into account DPI is executed when the onresize event is triggered, as well.
http://htmldoodads.appspot.com/dimensions.html
*/
var zoomLevel: number;
//If the browser supports the corrent API, then use that
if (screen && screen.deviceXDPI && screen.logicalXDPI)
{
//IE6 and above
zoomLevel = (screen.deviceYDPI / screen.logicalYDPI);
else
{
//Chrome (see http://htmldoodads.appspot.com/dimensions.html)
zoomLevel = window.outerWidth / window.innerWidth; //e.g. 1680 / 420
}
return zoomLevel;
}
很遗憾，除了 IE 之外没有其他浏览器支持告诉你：
我的完整 TS 代码是：
function OnWindowResize() {
if (drawingTool == null)
return;
//Zoom changes trigger window resize event
//get size in CSS pixels (i.e. 96 dpi)
var styleWidth = window.innerWidth; //myCanvas.clientWidth;
var styleHeight = window.innerHeight; //myCanvas.clientHeight;
var newZoomLevel = GetZoomLevel();
// myCanvas.width = document.body.clientWidth;
// myCanvas.height = document.body.clientHeight;
//set canvas resolution to that of real pixels
myCanvas.width = styleWidth * newZoomLevel;
myCanvas.height = styleHeight * newZoomLevel;
//myCanvas.clientWidth = styleWidth;
//myCanvas.clientHeight = styleHeight;
myCanvas.style.width = styleWidth + "px"; //styleWidth.toString() + "px";
myCanvas.style.height = styleHeight + "px"; //styleHeight.toString() + "px";
drawingTool.Width = myCanvas.width;
drawingTool.Height = myCanvas.height;
// Only take action if zoom factor has changed (won't be triggered by actual resize of window)
if (newZoomLevel != lastZoomLevel) {
lastZoomLevel = newZoomLevel;
drawingTool.CurrentScaleFactor = newZoomLevel;
}
}
告诉您的绘图代码用户当前的缩放级别也很重要，以防您尝试对任何长度进行硬编码。例如。尝试画画
在 (50,50) 处的 32 像素框
错了。你需要画一个
在 (200,200) 处的 128 像素框
当缩放系数为 4 时。
注意：任何代码都会发布到公共领域。无需署名。