反应：画布中的图像消失

编程问答 2022-04-29

问题描述

我试图制作一个应该显示一些文本和图像的画布，但是在加载站点并且图像在很短的时间内可见时，它消失了。我在一些论坛上读到过这个问题，通常解决方案似乎是首先创建和图像，然后加载源，然后在 image.onload 方法中绘制它是正确的方法。但它仍然对我不起作用:(有人可以帮忙吗？

function makeCanvas() {
        const canvas = canvasRef.current
        if (canvas) {
            canvas.width = 648;
            canvas.height = 480;

            makeContext(canvas);
        }
    }

    function makeContext(canvas) {
        const context = canvas.getContext('2d')

        var image = new Image()
        image.src = prevImagePathRef.current
        image.onload = function () {
            //context.clearRect(0,context.canvas.width,context.canvas.height)
            //context.restore();
            context.drawImage(image,xPosImage,yPosImage,100,100);
            context.strokeStyle = "#000000";
            context.strokeRect(0,canvas.width,canvas.height);

            context.fillStyle = backgroundColor
            context.fillRect(0,canvas.height)
            
            context.font = fontSize + fontType;
            context.fillStyle = fontColor
            context.textAlign = "center"
            var list = createTextWithBreakLines(context,text,(canvas.width / 2))
            fillTextMultiLine(context,list,(canvas.width / 2),canvas.height)
            context.linewidth = 2;
            context.save();
        }
 
    }

HTML 代码：

<canvas ref={canvasRef} />

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvasdrawimageimageimageimagejavascriptreactjsreactjsreactjsreactjs