为什么我的绘图不在画布上显示？

我在画布上绘制了各种形状和文字，但浏览器中没有显示任何内容。 Chrome控制台中没有错误。我在另一个浏览器中打开它，认为它可能是缓存问题，但除了“绘制画布”按钮显示之外，它仍然没有任何内容。这是的jsfiddle：https://jsfiddle.net/0Lakv2do/为什么我的绘图不在画布上显示？

 <!DOCTYPE html> 
<html lang="en"> 
<head> 


    <meta charset="UTF-8"> 
     <title></title> 
     <style type="text/css"> 
      #content-wrapper { 
       width: 600px; 
       margin: 0 auto; 
       text-align: center; 
      } 
      #canvasRun { 
       background-color: #c00; 
       border: 0; 
       color: #fff; 
      } 

     </style> 

</head> 
<body> 
    <div id="content-wrapper"> 
     <button id="canvasRun">Draw Canvas</button><br><br> 
     <canvas id="myCanvas" width="600" height="450"></canvas> 
    </div> 
    <script type="text/javascript"> 

     var contentWrapper = document.getElementById('contentWrapper'); 
     var runButton = document.getElementById('canvasRun'); 
     var canvas = document.getElementById('myCanvas'); 
     myCanvas.style.visibility="hidden"; 

     runButton.addEventListener('click', showCanvas, false); 

     function showCanvas() { 

      myCanvas.style.visibility = "visible"; 
      if (myCanvas.getContext){ 

      var logo = new Image(); 
      logo.src = 'IIT_SAT_stack_186_white.png'; 

      function renderMyCanvas() { 
       var ctx = canvas.getContext('2d'); 


       var linearGrad = ctx.createLinearGradient(0,0,0,450); 

       linearGrad.addColorStop(0, 'white'); 
       linearGrad.addColorStop(1, 'black'); 

       ctx.fillStyle=linearGrad; 
       ctx.fillRect(0,20,600,450); 

       ctx.font = "32px sans-serif"; 
       ctx.fillStyle = 'red'; 
       ctx.fillText("ITMD 565 Canvas Lab", 135, 75); 

       ctx.beginPath(); 
       ctx.moveTo(15, 90); 
       ctx.lineTo(580, 90); 
       ctx.lineWidth = 3; 
       ctx.strokeStyle = 'red'; 
       ctx.closePath(); 
       ctx.stroke(); 

       ctx.font = "14px sans-serif"; 
       ctx.fillStyle = 'white'; 
       ctx.fillText("", 15, 410); 
       ctx.fillText("", 15, 430); 

       ctx.drawImage(logo, 300, 360, 250, 60); 

       ctx.fillStyle= 'white'; 
       ctx.fillRect(250, 250, 310, 100); 

        var x = canvas.width/2; 
        var y = canvas.height/2; 
        var radius = 75; 
        var startAngle = 1.1 * Math.PI; 
        var endAngle = 1.9 * Math.PI; 
        var counterClockwise = false; 

        ctx.beginPath(); 
        ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
        ctx.lineWidth = 15; 

        ctx.arc.strokeStyle = 'yellow'; 
       ctx.stroke(); 

       ctx.setLineDash([10, 10]); 
       ctx.beginPath(); 
       ctx.moveTo(270,300); 
       ctx.quadraticCurveTo(330, 220, 395, 300, 395, 300); 
       ctx.strokeStyle = 'black'; 
       ctx.stroke(); 

       ctx.beginPath(); 
       ctx.moveTo(395, 300); 
       ctx.quadraticCurveTo(450, 375, 540, 300); 
       ctx.strokeStyle = 'black'; 
       ctx.stroke(); 

      } 

     } 

     } 

    </script> 
</body> 
</html>

来源

2016-04-03 Grafics

我看不到任何地方给'renderMyCancas'调用 –

您刚才复制/粘贴一个功能你的其他函数中，你永远不要调用它。你还有一个不同的变量canvas那里，而在外面你有myCanvas。

复制/粘贴时请确保您确实知道您正在复制的内容以及它的工作原理。

看到一个Fiddle与去除的功能定义和固定的变量名称。

来源

2016-04-03 06:30:11

实际上，因为'myCanvas是画布的id并且变量'canvas'是指document.getElementById（“myCanvas”），所以两个变量都指向相同DOM对象。 – Kaiido

@卡里多哦，似乎有更多的混合使用这两个变量名称。无论如何主要问题是功能定义。 –

@Sami Kuhomen，谢谢。 – Grafics

为什么我的绘图不在画布上显示？

回答

相关问题