javascript - 如何使用asp.net将两个图像放置在单个 Canvas 中？

Question

      function draw() 
      {
            var ctx = document.getElementById('canvas').getContext('2d');
            var img = new Image();
            img.onload = function()
         {
                ctx.drawImage(img,0,0);
                ctx.beginPath();
                ctx.moveTo(30,96);
                ctx.lineTo(70,66);
                ctx.lineTo(103,76);
                ctx.lineTo(170,15);
                ctx.stroke();
         };
        img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
      }

我在这段代码中有这个功能，两个图像放置在 Canvas 中，但在几秒内第二个图像移动到其他地方。我想将两个图像放置在 Canvas 中怎么办？

Answer 1

试试这个代码，希望有帮助:

DEMO FIDDLE

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);
var imagesLoaded = 0;
function main() {
    imagesLoaded += 1;

    if (imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0);
        ctx.globalAlpha = 0.5;
        ctx.drawImage(img2, 0, 0);
    }
}

function loadImage(src, onload) {
    var img = new Image();
    img.onload = onload;
    img.src = src;
    return img;
}