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

How to place the two images in single canvas using asp.net?

本文关键字：图像 两个 布中 单个画 asp 何使用 net      更新时间：2023-09-26
      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都放到画布上怎么办?

试试下面的代码，希望能有所帮助:

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;
}
相关文章：