0

クラスの関数を使用して画像を描画できません。私はすでに this.img と var img を試しましたが、どちらも機能していません。jquery-libary のオンライン ソースを追加してオンラインにしましたが、PC では動作しているオフライン ソースを使用しています。

<!doctype html>


<head>

    <link rel="stylesheet" href="js\jquery-ui-1.10.1.custom.css"/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">      </script>



<script type="text/javascript">

    var canvas;
    var ctx;
    var BurgerArray = new Array(50);

    function burger()
    {
        this.x = 10;
        this.y = 20;
        this.img = new Image();
        img.src='Img/Burger1.png'; 
        img.onload = function()
        {

        }
        this.teken = function()
        {
            ctx.drawImage(img,20,20);

        }

    }




    var b;
    $(document).ready(function() 
    {
        canvas =document.getElementById("MyCanvas");
        ctx =canvas.getContext("2d");

        b = new burger();
        b.teken();

    });

</script>
<style type="text/css">
#MyCanvas
{
    margin:auto; 
    display:block; 
    border:dashed; 
    border-color:#0F0;
}
</style>  
</head>


<body style=" width:100%; height:100%;">

<canvas id="MyCanvas" width="1000" height="600"></canvas>

</body>


</html>
4

1 に答える 1

0

新しいオブジェクトを作成すると、そのスコープはグローバル スコープとは異なります。実装を次のように変更します。

function burger(canvas)
{
    this.x = 10;
    this.y = 20;
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.teken = function() {
        this.ctx.drawImage(img,20,20);
    };
}

$(document).ready(function() {
    var canvas = document.getElementById("MyCanvas");
    var b = new burger(canvas);
    b.teken();
});
于 2013-04-16T17:51:24.580 に答える