Question

两个画布一个在另一个之上，如下所示。第二个画布cvs应该是透明的，因为默认情况下所有画布都是透明的，我做一个clearRect只是为了确保。

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <canvas id="myCanvas" width="578" height="430"></canvas>
    <canvas id="cvscan" style="display:none"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var cvs = document.getElementById('cvscan');
        var cvsctx = cvs.getContext('2d');

        context.save();
        context.clearRect(0, 0, 578, 430);
        context.fillStyle = 'gray';
        context.fillRect(0, 0, 578, 430);

        context.beginPath();
        context.moveTo(0, 0);
        context.lineWidth = 3;
        context.lineTo(578, 430);
        context.strokeStyle = '#444444';
        context.stroke();

        context.moveTo(578, 0);
        context.lineTo(0, 430);
        context.stroke();

        cvs.width = 200;
        cvs.height = 200;
        cvsctx.clearRect(0, 0, cvscan.width, cvscan.height);
        var curimg = cvsctx.getImageData(0, 0, cvs.width, cvs.height);
        context.putImageData(curimg, 50, 50);

        context.restore();
    </script>
</body>
</html>

我相信第二幅画布应该是透明的（因为它里面没有任何东西）是看不见的 - 但是它充满了白色。我错过了什么？

更新这是我所看到的 - 我相信白盒子不应该存在。

Here is the image

Answer 1

正在清除带有id =“cvscan”的画布，这意味着所有图像数据都设置为0， rgba（0,0,0,0），价值观。

接下来，该图像数据被绘制到带有id =“myCanvas”的画布上，将“myCanvas”上的像素更新为零。

因此，画布（“myCanvas”）现在在绘制的位置是透明的，并且被视为 white ，因为正在显示正文的背景。

要验证结果，运行测试记录图像数据，然后将 bgcolor 更新为红色。

（见照片）

堆叠画布和透明度

1 个答案: