canvas长宽变化时，画布内容消失

最新推荐文章于 2024-08-11 21:39:05 发布

vuturn

最新推荐文章于 2024-08-11 21:39:05 发布

阅读量9.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： canvas 复制图形重画

本文链接：https://blog.youkuaiyun.com/vuturn/article/details/47807899

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在HTML5 Canvas中调整画布尺寸时导致内容丢失的问题，并提供了两种解决方法：一种是通过getImageData和putImageData来复制画布内容；另一种是创建临时画布进行内容转移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas画布，当改变画布的长度或者宽度时，画布的内容会消失：

1.正常显示的canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas width="200px" height="100px" id="myCanvas"></canvas>
<script type="text/javascript">
  var canvas=document.getElementById("myCanvas"),
          cxt=canvas.getContext("2d");
    cxt.strokeStyle="#ff0000";
    cxt.strokeRect(10,10,50,50);
    //canvas.width="300px";
</script>
</body>
</html>

2.宽度改变时，画布内容消失：

<script type="text/javascript">
  var canvas=document.getElementById("myCanvas"),
          cxt=canvas.getContext("2d");
    cxt.strokeStyle="#ff0000";
    cxt.strokeRect(10,10,50,50);
    canvas.width="300px";
</script>

解决方案1：

把变化之前的画布内容copy一份，然后重新画到画布上。

var canvas=document.getElementById("myCanvas"),
        cxt=canvas.getContext("2d");
  cxt.strokeStyle="#ff0000";
  cxt.strokeRect(10,10,50,50);
  resize('300','100');

function resize(w,h)
{
    var imgData = cxt.getImageData(0,0,canvas.width,canvas.height);
    canvas.width = w;
    canvas.height = h;
    cxt.putImageData(imgData,0,0);
}

解决方案2：

var canvas=document.getElementById("myCanvas"),
        cxt=canvas.getContext("2d");
  cxt.strokeStyle="#ff0000";
  cxt.strokeRect(10,10,50,50);
  resize('300','100');

function resize(w,h)
{
    var nc = document.createElement("canvas");
    nc.width = canvas.width;
    nc.height = canvas.height;
    nc.getContext("2d").drawImage(canvas,0,0);
    canvas.width = w;
    canvas.height = h;
    cxt.drawImage(nc,0,0);
}