似乎无法使用功能反应将图像绘制到 canvas

Question

我正在尝试将图像绘制到 canvas 以在功能上与 typescript 做出反应。

我尝试将图像绘制到 canvas 上，但是 canvas 上什么也没有发生，我的控制台日志返回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;
        }

Answer 1

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

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

在你的代码中， function 的名称是getCanvas但你正在做document.createElement('canvas')我希望 object 以某种方式注入。

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

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

 <canvas id="canvas"></canvas>

要进一步解决您的问题，请尝试绘制更简单的东西，例如小矩形：
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillRect
看看是否显示，问题仅与图像有关，还是可能是 canvas 的位置...