如何翻译并使画布响应？答案

【问题标题】：How to translate and make canvas responsive?如何翻译并使画布响应？
【发布时间】：2021-08-11 16:16:03
【问题描述】：

我正在尝试移动以将画布转换为 (100,100)，但它没有移动。

并且画布没有响应，当我尝试使用 CSS 更改画布的大小时，圆圈正在缩小。
如何添加一个按钮来通过圆圈在画布上切换绘图（即：按下按钮时don't draw然后圆圈不应该在画布上绘制，按下时draw它应该绘制）

requestAnimationFrame(animate);
var ctx = canvas1.getContext('2d');

ctx.translate(100,100);
canvas1.width = innerWidth;
canvas1.height = innerHeight;


const bgCan = copyCanvas(canvas1);
const redSize = 6, blueSize = 5; // circle sizes on pixels
const drawSpeed = 1; // when button down draw speed in pixels per frame
var X = 50, Y = 50;
var angle = 0;
var mouseButtonDown = false;
document.addEventListener('mousedown', () => mouseButtonDown = true);
document.addEventListener('mouseup', () => mouseButtonDown = false);

function copyCanvas(canvas) {
    const can = Object.assign(document.createElement("canvas"), {
        width: canvas.width, height: canvas.height
    });
    can.ctx = can.getContext("2d");
    return can;
}

function circle(ctx){
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(X, Y, redSize, 0, Math.PI*2);
    ctx.fill();
}

function direction(ctx){
    const d = blueSize + redSize + 3;
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(d * Math.sin(angle) + X, d * Math.cos(angle) + Y, blueSize, 0, Math.PI*2);
    ctx.fill(); 
}
function animate(){
    ctx.clearRect(0, 0, ctx.canvas.width,  ctx.canvas.height);
    ctx.drawImage(bgCan, 0, 0);
    if (mouseButtonDown) {
        circle(bgCan.ctx);
        X += Math.sin(angle) * drawSpeed;
        Y += Math.cos(angle) * drawSpeed;
    } else {
        angle += 0.1;
        circle(ctx);
    }
    direction(ctx);
    requestAnimationFrame(animate);   
}

#canvas1{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: Black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas basics</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas1"></canvas>
    

    <input onclick="change()" type="button" value="Write" id="mybutton1"></input>
    
    
    <script src="script.js"></script>
</body>
</html>

【问题讨论】：

我认为你应该编辑这个问题，因为它不是很清楚。我不太明白你的问题，我怀疑其他人会。

标签： javascript html css canvas responsive-design

【解决方案1】：

translate(100, 100) 被画布的新宽度/高度重置。它只需要在设置宽度/高度后执行
最简单的方法是让窗口调整大小侦听器并更新画布样式的宽度/高度
我不知道为什么，但由于某种原因，画布的 z-index 更高，因此按钮的 onclick() 从未触发

在下面的代码中我添加了边界限制，它受到translate(100, 100)的影响。

requestAnimationFrame(animate);
var ctx = canvas1.getContext('2d');

canvas1.width = innerWidth;
canvas1.height = innerHeight;

ctx.translate(100, 100);

const bgCan = copyCanvas(canvas1);
const redSize = 6,
      blueSize = 5; // circle sizes on pixels
const drawSpeed = 1; // when button down draw speed in pixels per frame
const drawButton = document.getElementById("mybutton1");
var draw = true;

var X = 50,
    Y = 50;
var angle = 0;
var mouseButtonDown = false;
document.addEventListener('mousedown', onMouseEvent);
document.addEventListener('mouseup', onMouseEvent);

function copyCanvas(canvas) {
  const can = Object.assign(document.createElement("canvas"), {
    width: canvas.width,
    height: canvas.height
  });
  can.ctx = can.getContext("2d");
  return can;
}

function circle(ctx, mousedown) {
  if (mousedown && !draw)
    return;

  ctx.fillStyle = 'black';
  ctx.beginPath();
  ctx.arc(X, Y, redSize, 0, Math.PI * 2);
  ctx.fill();
}

function direction(ctx) {
  const d = blueSize + redSize + 3;
  ctx.fillStyle = draw ? 'blue' : 'red';
  ctx.beginPath();
  ctx.arc(d * Math.sin(angle) + X, d * Math.cos(angle) + Y, blueSize, 0, Math.PI * 2);
  ctx.fill();
}

function animate() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.drawImage(bgCan, 0, 0);
  if (mouseButtonDown) {
    circle(bgCan.ctx, mouseButtonDown);
    const x = X + Math.sin(angle) * drawSpeed,
          y = Y + Math.cos(angle) * drawSpeed;

    if (x > (blueSize + redSize) * 2 && x < canvas1.width - (blueSize + redSize) * 2 &&
        y > (blueSize + redSize) * 2 && y < canvas1.height - (blueSize + redSize) * 2)
    {
      X = x;
      Y = y;
    }
  } else {
    angle += 0.1;
    circle(ctx);
  }
  direction(ctx);
  requestAnimationFrame(animate);
}

function onMouseEvent(e) {
  if (e.target === drawButton) {
    if (e.type == "mouseup")
    {
      draw = !draw;
      document.getElementById("mybutton1").value = draw ? "Write" : "Move";
    }

    return;
  }

  mouseButtonDown = e.type == "mousedown";
}

window.addEventListener("resize", handleResize)
function handleResize ()
{
  const ratio = canvas1.width / canvas1.height;
  let h = window.innerHeight,
      w = h * ratio;

  if (w > window.innerWidth) {
    w = window.innerWidth;
    h = w / ratio;
  }

  canvas1.style.width = w + 'px';
  canvas1.style.height = h + 'px';
};

handleResize(); // First draw

#canvas1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: Black;
  z-index: -1; /* let other elements receive events */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas basics</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <canvas id="canvas1" scaleMode='fill'></canvas>
  <input type="button" value="Write" id="mybutton1" />

  <script src="script.js"></script>
</body>

</html>

【讨论】：