清除Javascript/HTML中的画布按钮不起作用

Clear canvas button in Javascript/HTML not working

本文关键字：按钮 不起作用 布按钮 Javascript HTML 清除      更新时间：2024-01-30

所以我的代码显示了一个html页面，上面有一些文本，然后在下面我有一个"清除画布"按钮，我希望在按下后清除画布，然后能够在这个空白画布上绘制。我的透明画布按钮不起作用，一按下它就什么都不做。我使用回调来执行画布清除，html文件连接到一个javascript文件，然后该文件在新清除的画布上绘制内容。这里的第一个代码是带有正在清除的画布的.html文件，其中还加入了.js文件

我尝试了上下文。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

这一行有一个拼写错误：

context.strokeStyle = #FA8072;

您需要报价：

context.strokeStyle = '#FA8072';

修复后，它似乎可以工作：http://jsfiddle.net/eMSXU/

（顺便说一句，你可能想按下小提琴上的"整理"按钮，看看你的代码应该如何缩进…）

相关文章：