Разделение PNG на слои (HTML5, JS) - PullRequest
0 голосов
/ 22 июня 2011

Я работаю над небольшим некоммерческим проектом, и сейчас я застрял в том, что скрипт берет изображение в формате png, однако, когда я его экспортирую, есть два слоя, как мне разделить это изображение надва разных слоя и манипулировать один раз, когда он загружен в конвас?

<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>

1 Ответ

5 голосов
/ 22 июня 2011

Насколько я знаю, PNG не имеет никаких слоев, поэтому вам нужно было бы сохранить одно изображение для каждого слоя, чтобы манипулировать ими по отдельности.

...