Question

我已经尝试了我能想到的一切，并且达到了我的智慧。

＆＃34; tilesheet.png＆＃34;应该画在画布上，但我尝试的东西似乎都没有用。偶尔，当我尝试在网上找到的一种新方法时，它看起来效果很好，但是如果我刷新页面就会再次停止。

以下是我使用的代码：

<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>

2015年10月30日更新 - 使用Google Chrome＆＃34; Inspect Element＆＃34;功能，我注意到报告了一个错误： TypeError: this.canvas.getContext is not a function (test.php:26)
有谁知道可能导致这种情况的原因？

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

非常感谢任何帮助。谢谢！

Answer 1

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

问题证明是在不能使用jquery的地方混合使用jquery，以及将我的＆＃34; onload＆＃34;功能在错误的地方。

以下是我使用的最终代码：

<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（）不起作用

1 个答案: