jqueryが動作しないhtmlのキャンバス

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    <title>Hello ...</title> 
    </head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
    var CANVAS_WIDTH = 400; 
    var CANVAS_HEIGHT = 200; 
    var canvasElem = $("<canvas id='my-canvas' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas>"); 
    $(canvasElem).appendTo('body') ; 


    var canvas = canvasElem.get(0); 

    var context = canvas.getContext("2d"); 
    context.fillRect(0,0,400,200); 



    </script> 

    <body> 
    Testing ... 
    </body> 
</html>

上記のコードはキャンバスを描画していません。しかし、例えば</script>の後に何かを書くと、6行目を次のように置き換えると、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>here
が描画されます。私は上記のコードでエラーを理解することはできません。jqueryが動作しないhtmlのキャンバス

出典

2017-01-08 Anoop Kumar

スクリプトが実行された時点でDOMが準備されていません。あなたはどちらかbody内のスクリプトを入れたり、DOMの準備ができた直後に実行されるイベントリスナーを追加することができます。

window.onload = function() { 
    var CANVAS_WIDTH = 400; 
    var CANVAS_HEIGHT = 200; 
    var canvasElem = $("<canvas id='my-canvas' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas>"); 
    $(canvasElem).appendTo('body') ; 


    var canvas = canvasElem.get(0); 

    var context = canvas.getContext("2d"); 
    context.fillRect(0,0,400,200); 
}

出典

2017-01-08 11:26:37

は、それが今働いて、ありがとうございます。 –

jqueryが動作しないhtmlのキャンバス

答えて

関連する問題