無法從Jquery插件插入HTML Canvas

Question

我正在創建我的第一個Jquery插件。 我無法在使用它的畫布上繪畫。

(function($){
    $.fn.graph=function(options){

    var settings=$.extend({
    color:'orange'
    },options);

    this.css({backgroundColor:settings.color});

    this.element=document.createElement('canvas');
    var ctx=this.element.getContext("2d");

    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
    console.log(this.element);
    };
}(jQuery));

Answer 1

您的element需要附加到頁面上。 采用：

$( this.element ).appendTo( 'body' )

來自.appendTo() 。

這是最終代碼：

 ( function( $ ) { $.fn.graph = function( options ) { var settings = $.extend({ color: 'orange' }, options ); this.css({ backgroundColor: settings.color }); this.element = document.createElement( 'canvas' ); $( this.element ).appendTo( 'body' ); var ctx = this.element.getContext('2d'); ctx.font = '30px Arial'; ctx.fillText('Hello World', 10, 50); console.log( this.element ); }; }( jQuery ) ); $( 'body' ).graph(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>