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';
      }

我在这个代码中有这个功能两个图像放在画布上但是在几秒钟之内img正在移动到其他地方。我想在画布上放置两个img怎么办？

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

如何使用asp.net将这两个图像放在单个画布中？

1 个答案:

DEMO FIDDLE