Javascript 如何获取设备大小（移动设备）？我试图在设备浏览器的宽度和高度中间画一个圆。但是canvas元素会干扰。圆圈在设备宽度和高度的中间变为平直，如果使画布足够大，但画布尺寸应适合于设备尺寸。_Javascript_Html_Canvas

Javascript 如何获取设备大小（移动设备）？我试图在设备浏览器的宽度和高度中间画一个圆。但是canvas元素会干扰。圆圈在设备宽度和高度的中间变为平直，如果使画布足够大，但画布尺寸应适合于设备尺寸。

javascript html canvas

Javascript 如何获取设备大小（移动设备）？我试图在设备浏览器的宽度和高度中间画一个圆。但是canvas元素会干扰。圆圈在设备宽度和高度的中间变为平直，如果使画布足够大，但画布尺寸应适合于设备尺寸。,javascript,html,canvas,Javascript,Html,Canvas,有什么方法可以适应画布宽度和高度设备的宽度和高度吗这就是解决方案： <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1"> <style> /* Remove padding and margin */ * {

有什么方法可以适应画布宽度和高度设备的宽度和高度吗

这就是解决方案：

<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
    <style>
    /* Remove padding and margin */
    * { 
      margin:0; 
      padding:0; 
    } 

    html, body, .myCanvas {
      width: 100%;
      height: 100%;
    } 
    </style>
  </head>
  <body>
    <canvas id="myCanvas" class="myCanvas"/>
    <script>

      var canvas = document.getElementById('myCanvas');
      var width = canvas.width;
      var height = canvas.height;

      var context = canvas.getContext('2d');
      var centerX = width / 2;
      var centerY = height / 2;
      var radius = 70;


      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#FF3300';
      context.stroke();

      console.log("width: " + width);
      console.log("height: " + height);
    </script>
  </body>
</html>


/*去掉衬垫和边距*/
* { 
保证金：0；
填充：0；
} 
html，body，.myCanvas{
宽度：100%；
身高：100%；
} 
var canvas=document.getElementById（'myCanvas'）；
var width=canvas.width；
var height=canvas.height；
var context=canvas.getContext（'2d'）；
var centerX=宽度/2；
变量centerY=高度/2；
var半径=70；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='green'；
context.fill（）；
context.lineWidth=5；
context.strokeStyle='#FF3300'；
stroke（）；
控制台。日志（“宽度：”+宽度）；
控制台日志（“高度：+高度）；

使用css%大小

HTML:

编辑：

获取画布的宽度/高度，而不是窗口的宽度/高度

<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
    <style>
    /* Remove padding and margin */
    * { 
      margin:0; 
      padding:0; 
    } 

    html, body, .myCanvas {
      width: 100%;
      height: 100%;
    } 
    </style>
  </head>
  <body>
    <canvas id="myCanvas" class="myCanvas"/>
    <script>

      var canvas = document.getElementById('myCanvas');
      var width = canvas.width;
      var height = canvas.height;

      var context = canvas.getContext('2d');
      var centerX = width / 2;
      var centerY = height / 2;
      var radius = 70;


      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#FF3300';
      context.stroke();

      console.log("width: " + width);
      console.log("height: " + height);
    </script>
  </body>
</html>


/*去掉衬垫和边距*/
* { 
保证金：0；
填充：0；
} 
html，body，.myCanvas{
宽度：100%；
身高：100%；
} 
var canvas=document.getElementById（'myCanvas'）；
var width=canvas.width；
var height=canvas.height；
var context=canvas.getContext（'2d'）；
var centerX=宽度/2；
变量centerY=高度/2；
var半径=70；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='green'；
context.fill（）；
context.lineWidth=5；
context.strokeStyle='#FF3300'；
stroke（）；
控制台。日志（“宽度：”+宽度）；
控制台日志（“高度：+高度）；

在获得画布后，只需将其添加到代码中即可：

canvas.width = width;
canvas.height = height;

您还可以从html部分中删除

宽度

和

高度

属性

高度：100%

几乎总是有问题：100%是什么？这不会调整画布的大小，但会拉伸画布。在这种情况下，身体的100%会被拉伸。@FrédéricHamidi如果不将高度设置为100%，它就会工作，假设未设置为anything@Liam，看看。至少在Firefox上，您会注意到蓝色的

（实际上

本身）不会填充可用的垂直区域，除非您取消注释

和

元素上的

高度规则（即使这样，它也会超调几个像素，可能是边距问题）.I将其粘贴到var canvas=document.getElementById（'myCanvas'）下；它可以工作，但在窗口的右侧和底部有一个可滚动的条。。。。我怎样才能适应它？
<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
    <style>
    /* Remove padding and margin */
    * { 
      margin:0; 
      padding:0; 
    } 

    html, body, .myCanvas {
      width: 100%;
      height: 100%;
    } 
    </style>
  </head>
  <body>
    <canvas id="myCanvas" class="myCanvas"/>
    <script>

      var canvas = document.getElementById('myCanvas');
      var width = canvas.width;
      var height = canvas.height;

      var context = canvas.getContext('2d');
      var centerX = width / 2;
      var centerY = height / 2;
      var radius = 70;


      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#FF3300';
      context.stroke();

      console.log("width: " + width);
      console.log("height: " + height);
    </script>
  </body>
</html>  

canvas.width = width;
canvas.height = height;