图片不是第一次绘制javascript

image not drawn first time javascript

本文关键字：绘制 javascript 第一次      更新时间：2023-09-26

我知道这个问题已经被问过很多次了。然而，我使用了img。Onload以正确执行图像加载后将绘制到画布上的内容。我是新的javascript和有麻烦弄清楚。我在一个函数中完成了整个代码，并从init()函数调用它。这个init()函数在主体被加载时触发。

我这里有两个图像。它们在第一次加载时都不加载

function getAboutMeImage(){
    var galleryCanvas = document.createElement("Canvas");
    var galleryContext = galleryCanvas.getContext('2d');
    galleryCanvas.width = 800;
    galleryCanvas.height = 600;
    galleryCanvas.style.position = "absolute";
    galleryCanvas.style.display = "block";
    galleryCanvas.style.top = "50%";
    galleryCanvas.style.left = "50%";
    galleryCanvas.style.marginLeft = "-400px";
    galleryCanvas.style.marginTop = "-250px";
    galleryCanvas.setAttribute("id","canvas2");
    //galleryCanvas.style.background = "#FFF";
    document.body.appendChild(galleryCanvas);
    var points = [];
    points[0] = new Array(0.3,1.3,0.55,1.05,2.9,1.05,3.1,0.75,9.25,0.75,9.9,1.3,9.9,6.3,9.6,6.6,5.75,6.6,5.3,7.0,2.5,7.0,1,4.3,0.3,4.3,0.3,1.3);
    var points1 = [];
    points1[0] = new Array(3.2,1,9.25,1,9.25,6.4,3.2,6.4,3.2,1);
    drawPoly(galleryCanvas.width,0,0,11.0,7.0,galleryCanvas,points,"rgba(194,242,227,.2)",'#c2f2e3',10);
    drawPoly(galleryCanvas.width,0,0,11.0,7.0,galleryCanvas,points1,"#000","#000",0);
    //debugCanvas(galleryCanvas);
    var y = Math.round((7.0 / 11.0) * galleryCanvas.width);
    var width = Math.round(galleryCanvas.width / 11.0);
    var height = Math.round(y / 7.0);
    var img = new Image();
    img.onload = function() {
        var canvas2 = document.getElementById("canvas2");
        var ctx2 = galleryCanvas.getContext("2d");
        ctx2.drawImage(img,0.4 * width, 1.2*height, img.width, img.height);
    };
    img.src = "../logo.png";
    var ratio = img.height * 1.0/ img.width;
    img.width = Math.round(width*2.7);
    img.height = Math.round(ratio * img.width);
    var img2 = new Image();
    img2.src = "../about me background2.png";
    var ratio = img2.height * 1.0/ img2.width;
    img2.width = Math.round(width*2.8);
    img2.height = Math.round(ratio * img.width);
    img2.onload = function(){
        var ctx3 = galleryCanvas.getContext("2d");
        ctx3.drawImage(img2,0.4 * width, 2*height, img2.width, img2.height);
    }
    setupAboutMe(galleryCanvas,galleryCanvas.width,20,0);
    return galleryCanvas.toDataURL();
}

那么，我做错了什么?

一般建议:

两个onload回调是否都被触发?

如果不存在，检查镜像.src。

另外，检查您发送到drawImage的值

产生的x,y离开可见的画布区域?

结果width,height是零还是接近零?

相关文章：