Question

请参阅附件中的图片。我希望视角（边框）不与其他图像重叠。出于某些奇怪的原因，只有添加到画布的最后一个图像才能正确显示。

enter image description here

这是我的代码

<!DOCTYPE HTML>
<html>
<head>
<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>


  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();

      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var sources = {
  bg: 'bg2.jpg',
    a: 'a.jpg',
    b: 'b.jpg',
     c: 'c.jpg',
     d: 'd.jpg',
       e: 'e.jpg',
      f: 'f.jpg'

  };



    function drawImageRot(img,x,y,width,height,deg){

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var rad = deg * Math.PI / 180;
ctx.translate(x + width / 2, y + height / 2);
ctx.rotate(rad);

ctx.rect(width / 2 * (-1), height / 2 * (-1), width, height);
ctx.stroke();
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height);
ctx.rotate(rad * ( -1 ) );
ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
}
  loadImages(sources, function(images) {
   drawImageRot(images.bg, 0, 0, 600, 600,0);


   drawImageRot(images.b, 380, 55,277, 184,-20);

 drawImageRot(images.a,-20,-20, 300, 224,-30);
         drawImageRot(images.e, 130, 150,350, 274,0);
    drawImageRot(images.d, 320, 430,277, 184,20);
     drawImageRot(images.f, 0, 380, 240,160,-10);




  });



</script>

Answer 1

我的想法是首先绘制矩形边框然后绘制图像。另一件事是你绘制矩形的方式。如果你想绘制矩形，这是代码片段：

    ctx.beginPath();
    ctx.rect(width / 2 * (-1), height / 2 * (-1), width, height);
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'white';
    ctx.stroke();

另一件事是你回到原来的位置。使用ctx.save（）和ctx.restore（）有一种更简单的方法。这是画布建议您在进行转换时转回的方式。

所以这是我的解决方案，我希望你喜欢它。谢谢塞尔吉奥。

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();

      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }


  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');


  var sources = {
  bg: 'bg2.jpg',
    a: 'a.jpg',
    b: 'b.jpg',
     c: 'c.jpg',
     d: 'd.jpg',
       e: 'e.jpg',
      f: 'f.jpg'

  };


function drawRectanlesBorders(img,x,y,width,height,deg){

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var rad = deg * Math.PI / 180;

        ctx.save();
        ctx.translate(x + width / 2, y + height / 2);
        ctx.rotate(rad);
        ctx.beginPath();
        ctx.rect(width / 2 * (-1), height / 2 * (-1), width, height);
        ctx.lineWidth = 5;
        ctx.strokeStyle = 'white';
        ctx.stroke();
        ctx.restore();
    }


function drawImageRot(img,x,y,width,height,deg){

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var rad = deg * Math.PI / 180;

        ctx.save();
        ctx.translate(x + width / 2, y + height / 2);
        ctx.rotate(rad);
        ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height);
        ctx.restore();
    }


loadImages(sources, function(images) {

            //draw background  image
        drawImageRot(images.bg, 0, 0, 600, 600,0);

           //draw borders
        drawRectanlesBorders(images.b, 380, 55,277, 184,-20);


        drawRectanlesBorders(images.a,-20,-20, 300, 224,-30);
                drawRectanlesBorders(images.e, 130, 150,350, 274,0);
        drawRectanlesBorders(images.d, 320, 430,277, 184,20);
        drawRectanlesBorders(images.f, 0, 380, 240,160,-10);

         //draw images
        drawImageRot(images.b, 380, 55,277, 184,-20);

        drawImageRot(images.a,-20,-20, 300, 224,-30);
                drawImageRot(images.e, 130, 150,350, 274,0);
        drawImageRot(images.d, 320, 430,277, 184,20);
        drawImageRot(images.f, 0, 380, 240,160,-10);

  });

您应该决定绘制图像的顺序，看看您真正想看到的内容。

Answer 2

不要将z-index值设置为负值，而是尝试增加每个新图像的值（正数范围）。

编辑：找到类似的problem（已经解决）。它引导了各种最佳的画布绘制方法。

HTML5画布 - 与边界的图象拼贴画

2 个答案: