个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 19:14:59 26 4
gpt4 key购买 nike

我正在开发一个根据用户输入生成图形的小型网页。我计划在 html 代码中放置一个 canvas，并使用 javascript 来创建图像。我遇到的问题是 css 文件中定义的 canvas 大小似乎只能缩放一个小的 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>

输出，看起来像这样(当我将 css 文件中 canvas 的 width 替换为 时，也会发生同样的情况100%)

enter image description here

为什么我不能得到最多 700 的较小数字？

最佳答案

在没有 width 和 height 属性的情况下，您的神秘宽度和高度来自 Canvas 默认值。这些默认值宽度为 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>

编辑

根据 Kaiido 在下面的评论，以下代码片段可能是更好的方法。值得注意的是，clearRect 调用是多余的，getBoundingClientRect 应该为 Canvas 的宽度和高度提供更精确的值，并且 Canvas CSS 也是不必要的(它被覆盖了width 和 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;
}
<div class="canvas-wrapper">
  <canvas id="canvas"></canvas>
</div>

关于javascript - CSS 中的 Canvas 宽度看起来很糟糕并且与 javascript 代码不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36022515/

26 4 0
文章推荐： javascript - Node-Webkit mysql 数据到新闻提要
文章推荐： javascript - Angular 绑定(bind)未正确更新
文章推荐： javascript - 如何 "smooth"一个整数数组
文章推荐： javascript - 使用链式 Q promises 异步加载的局部变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com