根据视口调整 Canvas 的大小

Question

我尝试创建一个 Canvas 具有适合屏幕大小的建议

目前我正在使用这个：

JS

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = './media/assets.png';
 
const render = function() {
  
context.canvas.width = document.documentElement.clientWidth * 1;
context.canvas.height = document.documentElement.clientHeight * 0.95;

      };
      window.addEventListener("resize", render);
      render();

CSS

* { box-sizing:border-box; margin:0; padding:0; }

html { height:100%; width:100%; }

      body {
        align-content:space-around;
        background-color:#202830;
        color:#ffffff;
        display:grid;
        justify-content:center;
        font-size:1.25em;
        min-height:100%;
        width:100%;
      }

但是这不起作用我有一个错误“上下文未定义”

是否可以直接在index.css文件中定义这两项？

context.canvas.width = document.documentElement.clientWidth * 1;
context.canvas.height = document.documentElement.clientHeight * 0.95;

直接在渲染中定义 Canvas 的大小让我很困扰

Answer 1

您没有变量 context，在您的代码中将其命名为 ctx，更新到：

    ...
    ctx.canvas.width = document.documentElement.clientWidth * 1;
    ctx.canvas.height = document.documentElement.clientHeight * 0.95;
    ...

您也可以直接设置为您的canvas：

    canvas.width = document.documentElement.clientWidth * 1;
    canvas.height = document.documentElement.clientHeight * 0.95;

所以两者都指的是您的 canvas 元素

根据视口调整 Canvas 的大小

Adapt the size of a Canvas according to the viewport

javascript

canvas

html5-canvas