用JQuery在畫布上繪製圖像

$.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不是一個函數」。我用this文章來編程，但它仍然無法正常工作。用JQuery在畫布上繪製圖像

來源

2017-09-01 Симеон Симеонов

訪問看看https://stackoverflow.com/a/2925139 – Sebastian

[jQuery的等效得到一個畫布的上下文中的（可能的重複https://stackoverflow.com/questions/2925130/jquery-of-getting-the-context-of-a-canvas） – Sebastian

據我所知，getContext（「2d」）不是'jQuery'函數，而是'JavaScript'。爲了得到你想要的，使用'const $ context = $ canvas [0]'來代替。 – masterpreenz

您正試圖訪問getContext-jQuery對象的方法。但getContext是HTMLCanvasElement的方法，其是下$('<canvas></canvas>')[0].getContext("2d")

來源

2017-09-01 09:20:13

你可以在console.log（'（''）[0]）''__proto__'方法中找到它' –

用JQuery在畫布上繪製圖像

回答

相關問題