修改

Question

我正在开发一个基于用户输入生成图形的小网页。我计划在canvas代码中放置html，并使用javascript创建图片。我遇到的问题是canvas文件中定义的css大小似乎只缩放了一小canvas而不是实际创建一个更大的html。这是我的function test() { var canvas = document.getElementById("canvas"); if (null == canvas || !canvas.getContext) return; ctx = canvas.getContext("2d"); for (var i = 0; i <= canvas.width; i += 50) { for (var j = 0; j < canvas.height; j += 20) { ctx.fillText(j, i, j); } } }代码

body {
    background-color: rgba(0, 100, 100, 0.2);
    width: 100%;
}
    
canvas {
    width: 100%;
}

<html>

<head>
   <meta charset="utf-8">
   <title>
      Test
   </title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0,
        maximum-scale=1.0, user-scalable=no" />

   <link rel="stylesheet" href="css/styles.css">

   <script language="javascript" type="text/javascript" src="js/worker.js">
   </script>

</head>

<body onload="test()">
    <canvas id="canvas"></canvas>
</body>

</html>

width

输出看起来像这样（当我将canvas文件中css的{{1}}替换为100%时，会发生同样的情况

为什么我不能获得高达700的小数字？

Answer 1

在没有width和height属性的情况下，您的神秘宽度和高度来自画布默认值。这些默认值的宽度为300，高度为150。详细了解HTMLCanvasElemnet here。

要纠正此行为，您可以使用这些属性（不理想）为其指定静态宽度和高度，也可以使用javascript设置宽度和高度。我建议使用offsetWidth和offsetHeight属性。每当窗口调整大小时，还必须设置这些值。这可以通过事件监听器来完成。这是一个演示：

https://jsfiddle.net/f7btghdr/2/

var canvas = document.getElementById("canvas");

ctx=canvas.getContext("2d");

function test() {
  for (var i=0; i <= canvas.offsetWidth; i += 50){
    for (var j=0; j <= canvas.offsetHeight; j += 20){
      ctx.fillText(i + 'x' + j,i,j);
    }
  }
}

function adjustCanvas() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.textBaseline="top";
  test();
}

window.addEventListener('resize', adjustCanvas);
adjustCanvas();

html, body, canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

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

修改

Per Kaiido在下面的评论中，以下片段可能是更好的解决方法。值得注意的是，clearRect调用是多余的，getBoundingClientRect应该为画布的宽度和高度提供更精确的值，并且画布CSS也是不必要的（它会被width覆盖和＃{1}}物业无论如何都是马上的。下面是修改后的演示，其中包含这些更改。

height

var canvas = document.getElementById("canvas");

ctx=canvas.getContext("2d");

function test() {
  for (var i=0; i <= canvas.offsetWidth; i += 50){
    for (var j=0; j <= canvas.offsetHeight; j += 20){
      ctx.fillText(i + 'x' + j,i,j);
    }
  }
}

function adjustCanvas() {
  var dimensions = canvas.parentNode.getBoundingClientRect();
  canvas.width = dimensions.width;
  canvas.height = dimensions.height;
  ctx.textBaseline="top";
  test();
}

window.addEventListener('resize', adjustCanvas);
adjustCanvas();

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.canvas-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  display: block;
}

Answer 2

使用Javascript使用window.innerWidth＆amp;设置画布宽度和高度window.innerHeight。
这将匹配设备的视口。

function test() {
   var canvas = document.getElementById("canvas");
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   if (null == canvas || !canvas.getContext) return;

   ctx = canvas.getContext("2d");

   for (var i = 0; i <= canvas.width; i += 50) {
      for (var j = 0; j < canvas.height; j += 20) {
         ctx.fillText(j, i, j);
      }
   }
}

CSS中的画布宽度看起来很糟糕，并且与javascript代码不一致

2 个答案:

修改