Home / Questions / 239075
Accepted
mperez
Asked: 2020-02-20 07:22:57 +0800 CST 2020-02-20 07:22:57 +0800 CST

在不改变内容的情况下扩展画布的画布

  • 772

通过创建canvas，我希望它始终占据整个屏幕。canvas我正在尝试自动调整窗口大小，但不改变它包含的图形内容的大小。

所以在调整大小时它会占据整个屏幕，我使用的是 jQuery：

$(window).resize(function () {
   $("#myCanvas").css({ "width": "100%", "height": "100%" });
});

使用这种形状，画布的内容被放大了，这不是我想要的。在下面的图片中，我展示了我想要避免的东西。一方面，我们有任何图像：

小尺寸屏幕图像

并且使用我编写的 jQuery 代码，在调整屏幕大小时，画布中包含的图像会变形：

修改后的图像

我已经添加canvas到 adiv的目的是为其提供上下文，以便画布使用它所属的 div 的尺寸，并使用 jQuery 修改不是 的canvas，而是 的div，但这样的绘画区域的canvas。你知道在不改变现有图形内容的情况下更新画布尺寸的方法吗？在上面的示例中，我绘制了一个圆圈，但它可以是任何已知或未知的图形元素，因此canvas使用新大小重新加载它并重新绘制图形组件不是我正在寻找的解决方案。在下面的代码中，我将使用canvas用作黑板的示例，通过单击和移动鼠标在其中进行绘制，就好像它是“绘画”一样。

这是我用于测试的代码：

 $(window).resize(function () {
        $("#myCanvas").css({ "width": "100%", "height": "100%" });
    });

 var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        ctx.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
         var mouse = { x: 0, y: 0 };

    canvas.addEventListener('mousemove', function (e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
    }, false);
 ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
canvas.addEventListener('mousedown', function (e) {
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);

        canvas.addEventListener('mousemove', onPaint, false);
    }, false);

    canvas.addEventListener('mouseup', function () {
        canvas.removeEventListener('mousemove', onPaint, false);
    }, false);

    var onPaint = function () {
        ctx.lineTo(mouse.x, mouse.y);
        ctx.stroke();
    };
 body,
 html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
        <canvas id="myCanvas"></canvas>
    </div>

javascript

1 Answers

  1. Best Answer

    不要在 CSS 中这样做。在 JavaScript 中更改画布的大小。将画布的大小设置为等于我使用的窗口的大小c.width = window.innerWidth; c.height = window.innerHeight;。在代码中我留下了你所拥有的。

    几乎所有你需要做的就是在画布上重新绘制所有内容resize。但请注意：resize 事件会非常频繁地触发，因此最好在setInterval

    var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
       /* 
        c.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        c.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();*/


function Init(){
// recalcula el tamaño del canvas
        c.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        c.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
        // limpia el canvas
        ctx.clearRect(0,0,c.width,c.height);
        // vuelve a dibujar todo
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
}


window.setTimeout(function() {
  Init();

  window.addEventListener('resize', Init, false);
}, 15);
    body,
 html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100vh;
}

canvas{background:silver}
    <div id="container">
        <canvas id="myCanvas"></canvas>
    </div>

    更新

    OP添加了他的代码。事实证明，您想创建一个程序，用户可以在其中绘制一些东西。

    我已经修改了代码。在画布上绘图时，每个点都存储在数组数组中。在画布上移动鼠标时，我首先清除画布，clearRect然后重新绘制所有内容。

    //un boleano utilizado para dibujar solo después de haver hecho clic en el canvas
let dibujamos = false;
// el array de los puntos utilizado para dibujar todo de nuevo
let puntos = [];
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.lineJoin = "round";
ctx.lineCap = "round";

let mouse = { x: 0, y: 0 };

canvas.addEventListener(
  "mousedown",
  function(e) {
    dibujamos = true;
    mouse = oMousePos(canvas, e);
    puntos.push([]);
  },
  false
);

canvas.addEventListener(
  "mousemove",
  e => {
    if (dibujamos) {
      mouse = oMousePos(canvas, e);
      puntos[puntos.length - 1].push({ x: mouse.x, y: mouse.y });
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      dibujar(puntos);
    }
  },
  false
);

canvas.addEventListener(
  "mouseup",
  function() {
    dibujamos = false;
  },
  false
);

function Init() {
  // recalcula el tamaño del canvas
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // limpia el canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // vuelve a dibujar todo
  dibujar(puntos);
}


// utiliza el array de puntos para dibujar de nuevo los trazados
function dibujar(puntos) {
  puntos.forEach(ry => {
    ctx.beginPath();
    ctx.moveTo(ry[0].x, ry[0].y);
    ry.forEach(p => {
      ctx.lineTo(p.x, p.y);
    });
    ctx.stroke();
  });
}


window.setTimeout(function() {
  Init();
  window.addEventListener("resize", Init, false);
}, 15);


// una función para detectar la posición del ratón en el canvas
function oMousePos(canvas, evt) {
  let ClientRect = canvas.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}
    *{margin:0;padding:0}
canvas{background:#d9d9d9;}
    <canvas id="myCanvas"></canvas>

    如果在这一切之后您仍然有兴趣知道如何使用 css 在调整大小的画布中检测鼠标位置，这可能会有所帮助：鼠标位置

    • 4