似乎无法使用功能性反应将图像绘制到画布上答案

【问题标题】：Can't seem to draw an image onto the canvas using functional react似乎无法使用功能性反应将图像绘制到画布上
【发布时间】：2023-01-21 09:19:10
【问题描述】：

我正在尝试在画布上绘制图像以在功能上与打字稿做出反应。

我尝试将图像绘制到画布上，但是画布上什么也没有发生，我的控制台日志返回 undefined 不知道为什么会这样。任何帮助将不胜感激。

        function getCanvas() {
            const canvas = document.createElement('canvas');
            canvas.setAttribute('id', 'canv1');
            const ctx = canvas.getContext('2d');

            const imageObj1 = new Image();
            imageObj1.src = 'https://s-media-cache-ak0.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg';

            imageObj1.addEventListener('load', (e) => {
                const drawImage = (ctx as CanvasRenderingContext2D).drawImage(imageObj1, 33, 71, 104, 124, 21, 20, 87, 104);
                                // returns undefined
                console.log('REMOVE-ME',drawImage);
            });
                        // Nothing happens on the canvas
            return canvas;
        }

【问题讨论】：

标签： javascript reactjs canvas webrtc

【解决方案1】：

您孤立的代码看起来不错...

undefined 可以作为 drawImage 的返回值，您可以在文档中看到：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#return_value

在您的代码中，函数的名称是getCanvas，但您正在执行document.createElement('canvas')，我希望该对象以某种方式注入。

我用这些相同的参数测试了图像并且加载正常：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.fillRect(5, 5, 90, 10)

var image = new Image()
image.src = "https://i.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg"
image.onload = imageLoaded

function imageLoaded() {
  ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104)
}

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

要进一步解决您的问题，请尝试绘制更简单的东西，例如小矩形：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect
看看是否显示，是图像的问题还是画布的位置......

【讨论】：