Question

我正在为一个小型的非商业项目工作，我现在坚持的是脚本选择了一个png图像，但是当我导出它时，有两层，我该如何将这个图像划分为两个不同的层，一旦加载到convas中就操纵一个？

<html>
<head>
    <title>test</title>
    <script type="text/javascript">
        function startup() {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.src = 'brushes.png';
            img.onload = function() {
                ctx.translate(32, 120);
                ctx.rotate(40 * Math.PI/180);
                ctx.drawImage(img, -32, -120, 64, 120);
            }
        }
    </script>
</head>
<body onload='startup();'>
    <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas>
</body>

Answer 1

据我所知，PNG没有任何图层，因此您需要为每个图层保存一个图像以单独操作它们。

将PNG划分为多个层（HTML5，JS）

1 个答案: