자바 스크립트가 작동하지 않습니다.

-5

자바 스크립트가 작동하지 않는 데 심각한 문제가 있습니다. 그것은 내 브라우저 (파이어 폭스)에서 활성화되어 있으며 다른 브라우저에서 코드를 테스트하려고 시도했습니다 ... 내 코드는 다음과 같습니다. 이슈가 뭐야?자바 스크립트가 작동하지 않습니다.

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

출처

2016-07-01 Cyfer

+11

전화 천국을 위하여 기능! –

당신은 무엇을 기대하고 있습니까 – bwegs

어떤 오류가 있습니까? – ssube

기능을 호출 해보십시오.

함수 정의 뒤에 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>

출처

2016-07-01 15:19:42 Zeph

위대한, 도와 줘서 고마워. 이것은 나를 위해 일했다. 자바 스크립트보다 HTML과 CSS에 대한 경험이 많았지 만 약간의 도움이 필요하다. – Cyfer

제프의 대답은 정확하지만, 그냥 당신이 볼 수 있도록 쉽게 더 많은 표준 규칙을 따르도록, 당신은 단지 코드의 맨 아래에 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>

출처

2016-07-01 15:24:59

환상적입니다, 카일 고마워요. 당신도 매우 도움이되었습니다. – Cyfer

자바 스크립트가 작동하지 않습니다.

답변

관련 문제