画布层（Z 索引）答案

【问题标题】：Canvas Layers (Z Index)画布层（Z 索引）
【发布时间】：2013-06-21 21:13:25
【问题描述】：

我知道 Canvas 就像墨水一样干燥，每个绘制的项目都在上面。

我有一个小问题，我有一个背景图片来源列表

                var sources = {
                  bg: 'images/room-1/bg.png',
                  rightWall: 'images/room-1/wall-right.png',
                  leftWall: 'images/room-1/wall-left.png',
                  beam: 'images/room-1/beam-left.png',
                  sofa: 'images/room-1/sofa.png'
                };

                loadImages(sources, function(images) {
                  context.drawImage(images.bg, 0, 0, 760, 500);
                  context.drawImage(images.rightWall, 714, 0, 46, 392);
                  context.drawImage(images.leftWall, 0, 160, 194,322);
                  context.drawImage(images.beam, 0, 45, 143,110);
                  context.drawImage(images.sofa, 194, 280, 436,140);
                });

这很好，他们按我喜欢的方式订购。

我的问题是我有一个图片上传供用户将他们的图片上传到画布中。

我只是使用上传框来测试理论，但想法是用户将使用 JQuery / PHP 上传他们的图像，裁剪，缩放它，这会保存图像。然后我将抓取这个经过处理的 URL 并将其拉入，但问题是 Canvas 已加载，因此当我上传图像时，它会在源图像之上。

我不想使用多个画布，因为我需要将此画布保存为一个整体。

            var imageLoader = document.getElementById('imageLoader');
                imageLoader.addEventListener('change', handleImage, false);

                function handleImage(e){
                    var reader = new FileReader();
                    reader.onload = function(event){

                        var img = new Image();
                        img.onload = function(){
                            canvas.width = 760;
                            canvas.height = 300;
                        }
                        img.src = event.target.result;
                        img.onload = function(){
                            context.drawImage(img, 0, 0);
                        };
                    }
                    reader.readAsDataURL(e.target.files[0]);     
                }

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

画布没有图层。

但您仍然可以获得 1 张最终图像，其中包含背景和用户缩放/旋转的前景。

由于您想让用户旋转/缩放他们的图像但又不想影响背景，因此您需要 2 个画布——一个背景画布和一个用户画布。

// HTML

<div id="container">
  <canvas id="background" class="subcanvs" width=760 height=300></canvas>
  <canvas id="canvas" class="subcanvs" width=760 height=300></canvas>
</div>

// CSS

#container{
  position:relative;
  border:1px solid blue;
  width:760px;
  height:300px;
}
.subcanvs{
  position:absolute;
}


// JavaScript 

// a background canvas
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");

// a foreground canvas the user can rotate/scale
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

然后当用户完成旋转/缩放后，将用户画布drawImage到背景画布。

// combine the users finished canvas with the background canvas
bkCtx.drawImage(canvas,0,0);

// and save the background canvas (now it's combined) as an image
var imageURL=background.toDataURL();

【讨论】：