javascript - 使用 JQuery 在 Canvas 上绘制图像

Question

$.fn.colorPicker = function () {
    const $div = this;
    const $colorPickerIcon = $("<img></img");
    const $canvas = $("<canvas></canvas>").addClass("canvas");
    const $context = $canvas.getContext("2d");
    const $closeButton = new Image();
    $closeButton.src = "./imgs/close.png";
    $($colorPickerIcon).attr("src", "./imgs/icon.jpg").attr("id", "icon").appendTo($div);
    $($colorPickerIcon).on("click", function () {
        $($colorPickerIcon).hide();
        $($closeButton).on("load", function () {
            $context.drawImage($closeButton, 0, 0);
        });
    });
}

我尝试了这段代码，经过多次更改后，我决定在这里寻求解决方案。我在获取上下文时遇到问题。我总是收到这个错误“TypeError: $canvas.getContext is not a function”。我用过this文章对此进行了编程，但仍然无法正常工作。

Answer 1

您正在尝试访问getContext - jQuery 对象的方法。但是getContext是 HTMLCanvasElement 的一种方法，可在 $('<canvas></canvas>')[0].getContext("2d") 下访问