JQuery canvas drawImage() 不工作

Question

我已经尝试了所有我能想到的方法，但我已经无计可施了。

"tilesheet.png" 应该绘制到 canvas 上，但我尝试的任何方法似乎都不起作用。偶尔，当我尝试一些网上找到的新方法时，它似乎可以正常工作一次，但如果我刷新页面，它又会停止。

这是我使用的代码：

<head>
    <title>Test Code</title>
    <script src='scripts/jquery.js'></script>
</head>
<body>
    <img id='img' src='images/tilesheet.png' style='position:absolute; visibility:hidden;'/>

    <div id="port"></div>

    <script>
        viewHeight = 10;
        viewWidth = 10;

        $("#port").append("<canvas id='mapview' width='"+(viewWidth*32)+"' height='"+(viewHeight*32)+"' style='border:1px solid black;'>Your browser doesn't support the canvas element.</canvas>");

        var worldMap = new gameMap(viewHeight,viewWidth);

        worldMap.redraw();


        // These functions define a gameMap "CLASS" //
        function gameMap (height,width){

            this.tileSheet = $("#img");
            this.canvas = $("#mapview");
            this.ctx = this.canvas.getContext("2d");//<-- Error is referring to this line

        }

        //Draw Function
        gameMap.prototype.redraw = function(){

            this.tileSheet.onload = function(){
                this.ctx.drawImage(this.tileSheet,10,10);
            }
            this.tileSheet.src = "apps/gamejournal/images/tilesheet.png";

            for(i = this.viewY; i < this.viewY+this.viewHeight; i++){
                for(j = this.viewX; j < this.viewX+this.viewWidth; j++){

                }
            }

            this.mapcss();
        };

        //CSS
        gameMap.prototype.mapcss = function(){
            var h = this.viewHeight*this.tileSize;
            var w = this.viewHeight*this.tileSize;

            $('#port').css({
                "height":h,
                "width":w,
                "position":"relative",
                "margin":"0 auto"
            });
        };
    </script>
</body>

更新 10/30/15 - 使用 Google Chrome 的 "Inspect Element" 功能后，我注意到一个错误正在报道： TypeError: this.canvas.getContext is not a function (test.php:26)
有谁知道这可能是什么原因造成的？

2015 年 11 月 4 日更新 - 我创建了一个 JSFiddle，因此您可以看到我的代码在做什么。 https://jsfiddle.net/6ss8ygLd/3/

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

好的，经过大量额外的研究，我似乎找到了解决我自己问题的方法。

事实证明，问题是在无法正常工作的地方使用 jquery，并将我的 "onload" 函数放在错误的地方。

这是我使用的最终代码：

<head>
    <title>Test Code</title>
    <script src='scripts/jquery.js'></script>
</head>
<body>
    <img id="tiles" src="images/tilesheet.png"  style="position:absolute; left:-9999px;"/>

    <div id="port"></div>

    <script>
        viewHeight = 10;
        viewWidth = 10;
        var mapw = viewWidth*32;
        var maph = viewHeight*32;

        $("#port").append("<canvas id='mapview' width='"+mapw+"' height='"+maph+"' style='border:1px solid black;'>Your browser doesn't support the canvas element.</canvas>");

        // These functions define a gameMap "CLASS" //
        function gameMap (height,width){

            this.canvas = document.getElementById("mapview");
            this.ctx = this.canvas.getContext("2d");
            this.tileSheet = document.getElementById("tiles");

        }

        //Draw Function
        gameMap.prototype.redraw = function(){

            this.ctx.drawImage(this.tileSheet,0,0);

        };


        //Call Functions
        document.getElementById("tiles").onload = function(){
            var worldMap = new gameMap(viewHeight,viewWidth);

            worldMap.redraw();
        }
    </script>
</body>

JQuery canvas drawImage() 不工作

JQuery canvas drawImage() not working

javascript

jquery

canvas

function

drawimage