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

最新推荐文章于 2024-07-25 16:49:03 发布

vuturn

最新推荐文章于 2024-07-25 16:49:03 发布

阅读量9.5k

点赞数 5

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

本文链接：https://blog.csdn.net/vuturn/article/details/47807899

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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);
}