Question

我在使用Javascript工作时遇到了严重问题。它在我的浏览器（Firefox）中启用，我甚至尝试在其他浏览器中测试代码...... 我的代码如下。有什么问题？

<html>
    <head>
        <title>DRAW</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="draw" height="300" width="300"></canvas>
        <script type="text/javascript">
            function draw() {
            var ctx = document.getElementById('draw').getContext('2d');
            var img = new Image();
            img.onload = function(){
                ctx.drawImage(img,0,0);
                ctx.beginPath();
                ctx.moveTo(30,96);
                ctx.lineTo(70,66);
                ctx.lineTo(103,76);
                ctx.lineTo(170,15);
                ctx.stroke();
            };
            img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
        }   
        </script>
    </body>
</html>

Answer 1

尝试调用该函数。

你可以在函数定义之后调用draw()，也可以将整个事件包装成一个立即调用的函数，如(function...)();

<html>
    <head>
        <title>DRAW</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="draw" height="300" width="300"></canvas>
        <script type="text/javascript">
            (function draw() {
            var ctx = document.getElementById('draw').getContext('2d');
            var img = new Image();
            img.onload = function(){
                ctx.drawImage(img,0,0);
                ctx.beginPath();
                ctx.moveTo(30,96);
                ctx.lineTo(70,66);
                ctx.lineTo(103,76);
                ctx.lineTo(170,15);
                ctx.stroke();
            };
            img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
        })();   
    </script>
    </body>
</html>

Answer 2

Zeph的答案是正确的，但只是为了让您更容易看到并遵循更多标准约定，您只需在代码底部添加draw()，以便它实际执行函数内的代码。你必须在你想要调用一个函数的时候这样做，并且以draw()的方式执行它而不是将整个事情放在括号中并添加另一个集合允许你多次执行它，如果这是必要的，它看起来更好，所以我认为这是更好的路线。

<html>
    <head>
        <title>DRAW</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="draw" height="300" width="300"></canvas>
        <script type="text/javascript">
            function draw() {
            var ctx = document.getElementById('draw').getContext('2d');
            var img = new Image();
            img.onload = function(){
                ctx.drawImage(img,0,0);
                ctx.beginPath();
                ctx.moveTo(30,96);
                ctx.lineTo(70,66);
                ctx.lineTo(103,76);
                ctx.lineTo(170,15);
                ctx.stroke();
            };
            img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
        }
        draw(); //Execute the function
    </script>
    </body>
</html>

Javascript一般不起作用

2 个答案: