Question

我尝试制作一个非常简单的模因生成器，您可以使用下拉菜单选择要添加文本的图像。我可以成功选择我想要的图像并在画布中显示它，但是当我更改我的选择时，不是更改图像而是将其添加到第一张图像上。

我希望能够选择图像，如果我改变主意，它只需替换当前图像。你可能会有任何建议，非常欢迎！

这是我的代码：

window.onload = function init(){

var selector = document.getElementById('selector');    
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var imagesObj = {
    "fry"       :   ['images/fry.jpg'],
    "badluck"   :   ['images/badluck.jpg'],
    "success"   :   ['images/success.jpg']

};


selector.addEventListener('change', function(){
    imagesObj[selector.value].forEach(function(item){
    imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = item;


});
});
}

Answer 1

看起来这就是诀窍：

context.clearRect(0, 0, 298, 350);

替换画布中的图像 - javascript

1 个答案: