2

请参阅所附图片。我希望 retangle（边框）不与其他图像重叠。出于某种奇怪的原因，只有添加到画布的最后一张图像正确显示。

在此处输入图像描述

这是我的代码

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

4

2 回答 2

5

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

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

  });

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

于 2013-10-01T14:21:11.390 回答
3

与其将 z-index 值设置为负数，不如尝试增加每个新图像的值（在正数范围内）。

编辑：发现了类似的问题（已经解决）。它指导在画布上绘制的各种最佳方法。

于 2013-10-01T10:55:01.527 回答