Question

我有979X482px的画布元素,我想让它伸展到任何特定浏览器窗口的宽度, 保持宽度/ 高1比宽度/ 高1比, 我想要相对于画布宽度的高度与大小。任何建议, 如何使用 javascript/ jQuery 来做到这一点吗?

Answer 1

首先,您将画布宽度设定为100%

$( #canvas ).css( width ,  100% );

然后在宽度上更新它的高度基数

$(window).resize(function(){
   $( #canvas ).height($( #canvas ).width() / 2.031);
});

2.031 = 979/482

但你不应该附着于$( 窗口) 。像我这样大小的大小... 这是不好的行为

Answer 2

 ctx.canvas.width = window.innerWidth;

 ctx.canvas.height = 3*window.innerWidth/4;

上下文为 ctx 。如果有必要的话, 边缘情况说明!

Answer 3

这个概念围绕了解画布的宽度。您也需要确保您所有的画布资产也使用计算方法来在浏览器上发布信息。我记录了我的代码, 我希望它有用,

<body>
// in style make your canvas 100% width and hight, this will not flex for all browsers sizes.

  <style>
    canvas{
      width: 100%;
      height:100%;
      position: relative;
    }
  </style>

  <canvas id="myCanvas"></canvas>

  <script>
    // here we are just getting the canvas and asigning it the to the vairable context
    var canvas = document.getElementById( myCanvas );
    var context = canvas.getContext( 2d );

    // no we get with of content and asign the same hight as the with. this gives up aspect ration 1:1.
    context.canvas.width = window.innerWidth;
    context.canvas.height = window.innerWidth;

    // If you want aspect ration 4:3 uncomment the line below.
    //context.canvas.height = 3 * window.innerWidth / 4;
  </script>
</body>

友情链接