Question

此代码在画布上绘制用户本地计算机的图像，然后在其他一些画布上滑动以进行幻灯片益智游戏

function drawImage(event) {

        if (event.target.files.length <= 0) return;
        var files = event.target.files;
        var URL = window.URL || window.webkitURL;
        var img = $("#image")[0];

        img.src = URL.createObjectURL(files[0]);

        getCanvas("karajan").drawImage(img, 0, 0, img.width, img.height, 0, 0, 450, 450);

       ...........

    }

    function getCanvas(id) {
        var canvas = $("#" + id)[0];
        if (canvas.getContext) {
            return canvas.getContext("2d");
        }
        return undefined;
    }

和从本地计算机输入图像文件的标签

<input type="file" accept="image/*" id="image_input" onchange="drawImage(event)"/>
<img id="image"/>

当用户想要更改图像时，画布将使用上一张图像绘制。我不知道为什么。在drawImage函数的第一行中，图像随着更新的图像而变化并在画布上绘制

Answer 1

画布不会自行清除，你必须告诉它清楚。您可以使用clearRect(x,y,w,h)擦除整个事物或控制区域。在此之后，您可以绘制新图像。

Answer 2

我认为在当前脚本终止之前，图像实际上并未“加载”。这意味着您应该监听图像的加载事件，然后才将其绘制到画布上。

我也对你的代码进行了一些重组。如果您已经有jQuery，请使用它：

$(function() {
    var URL = window.URL || window.webkitURL;
    var $image = $('#image').on('load', function() {
        // clear canvas here
        getCanvas("karajan")
            .drawImage(this, 0, 0, this.width, this.height, 0, 0, 450, 450);
        // ...
    });

    $('#image_input').on('change', function() {
        if (this.files.length === 0) return;

        $image.prop('src', URL.createObjectURL(this.files[0]));
    });
});

你应该仍然清理画布，正如Kolink建议的那样。否则，如果加载了较小的较小图像，则前一个较大图像的部分仍然可见。

为什么先前的图像在我的HTML5画布上绘制？

2 个答案: