Javascript 如何渲染根据窗口分辨率缩放的画布元素？

我的目标是创建一个javascript游戏，它利用在画布元素上移动和渲染精灵和图像。我想确保在不同的窗口分辨率下，游戏可以“拉伸”以填满窗口，而不会影响任何机制

我通过使用以下代码实现了这一点：

<canvas id="myCanvas" width=1920 height=1080>
</canvas>                                                                                    


<script>

   var viewportwidth;
   var viewportheight;

   //(mozilla/netscape/opera/IE7) 
   if (typeof window.innerWidth != 'undefined')
   {
       viewportwidth = window.innerWidth,
       viewportheight = window.innerHeight
   }



   // IE6 
   else if (typeof document.documentElement != 'undefined'
   && typeof document.documentElement.clientWidth !=
   'undefined' && document.documentElement.clientWidth != 0)
   {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
   }


   // older versions of IE
   else
   {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
   }
   myCanvas.style.height=viewportheight;
   myCanvas.style.width=viewportwidth;

</script>

变量视口宽度；
变量视口高度；
//（mozilla/netscape/opera/IE7）
if（typeof window.innerWidth！=“未定义”）
{
viewportwidth=window.innerWidth，
视口高度=window.innerHeight
}
//IE6
else if（typeof document.documentElement！=“未定义”
&&typeof document.documentElement.clientWidth=
“未定义”&&document.documentElement.clientWidth！=0）
{
viewportwidth=document.documentElement.clientWidth，
视口高度=document.documentElement.clientHeight
}
//IE的旧版本
其他的
{
viewportwidth=document.getElementsByTagName（'body'）[0]。clientWidth，
viewportheight=document.getElementsByTagName（'body'）[0]。clientHeight
}
myCanvas.style.height=视口高度；
myCanvas.style.width=视口宽度；

这使得画布精灵总是以固定分辨率（我定义为1920x1080）进行操作/渲染，但元素可以收缩或拉伸以适应其他分辨率

---

如果我在代码中包含Doctype行，它就不起作用了，这让我觉得这是旧代码，我可以用更好的方式来做。有什么建议吗？

是的，您可以根据视口大小（）调整画布的大小，但是游戏本身必须将画布中绘制的所有内容调整为新的大小。这不是矢量，它不能提取实际的像素大小。这意味着我必须用相对值来计算所有的东西，对吗？是的。还有另一个解决方案，涉及CSS转换，但它会扭曲画布和“像素”本身。它使用CSS进行缩放，并且（重要的是！）按比例缩放，因此画布内容不会失真。