Question

所以我的代码显示了一个带有一些文本的html页面，然后在下面我有一个“clear Canvas”按钮，我希望在推动后清除画布然后能够在这个空白画布上绘制。我的清晰画布按钮不起作用，一旦按下它就没有做任何事情。我正在使用回调来执行画布清除，并且html文件连接到javascript文件，然后在新清除的画布上绘制内容。这里的第一个代码是.html文件，其中正在清除的画布也加入了.js文件。

我尝试了context.Rect（x，y，w，h）; 和canvas.width.canvas.width; 似乎都不起作用。我正在使用Chrome

  <html><head></head>
   <h3>  </h3>
   <body >
    <canvas id="main" width="300" height="500"></canvas>

   <script>
   var canvas = document.getElementById("main");
  var context = canvas.getContext('2d');
   context.fillStyle = "#008000";
  context.rect(0,0,300,300);
 context.fill();

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

  <!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="user-scalble=no,initial-scale=1.0,maximum-scale=1.0" />
 <style>
 body { padding:10px; margin:0px; background-color: #FF9; }
 #main { margin: 10px auto 0px auto; }
 </style>
 <script src=".js"></script>
</head>
<body >
 <button id="clear">Clear Canvas</button><br>
<canvas id="main" width="300" height="500"></canvas>
 </body>
  </html>
   //end of .html file

// JavaScript Document
 // wait until window is fully loaded into browser
 window.onload = function() 
 {
  // so smart phone does not move/resize image when touched
 document.ontouchmove = function(e)
  { 
  e.preventDefault(); 
   }
  var canvas = document.getElementById('main');
  // Number of pixels used by the Clear button above canvas 
  var canvasTop = canvas.offsetTop;
  var context = canvas.getContext('2d');
  var lastX, lastY;
  context.strokeStyle = #FA8072;
  context.lineCap = 'round';
  context.lineJoin = 'round'; 
  context.lineWidth = 8;
   context.fill();
  // Function to Clear the Canvas
    function clear() 
   { 
      context.fillStyle = 'blue'
     context.rect( 0, 0, 300, 500);
    context.fill();
     }
    // Function Dot (to start a new line or just a point)
      function dot(x,y) 
  { 
    context.beginPath();
   context.fillStyle = '#D2691E';
   // draw tiny circle
   context.arc(x,y,1,0, Math.PI*2, true); 
   context.fill();
  context.closePath();
  }
  // Handle the Clear button
   var clearButton = document.getElementById('clear');
  // set callback funct. clear()for future touch events
 clearButton.onclick = clear;
 clear(); // do a clear canvas now
 } // end window.onload

Answer 1

你在这一行上有一个错字：

context.strokeStyle = #FA8072;

你需要引用：

context.strokeStyle = '#FA8072';

修复后，它似乎有效：http://jsfiddle.net/eMSXU/

（顺便说一下，你可能想按下小提琴中的“Tidy Up”按钮，看看你的代码应该如何缩进......）

Javascript / HTML中的清除画布按钮无法正常工作

1 个答案: