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

Question

So my code displays an html page with some text on it and then below that I have a "clear Canvas" button which I would like to have clear the canvas once pushed and then be able to draw on this blank canvas.所以我的代码显示了一个带有一些文本的 html 页面，然后在它下面有一个“清除画布”按钮，我想在按下后清除画布，然后能够在这个空白画布上绘图。 My clear canvas button isn't working, it isn't doing anything once pushed.我的透明画布按钮不起作用，按下后它什么也没做。 I'm using a call back in order to perform the canvas clear and the html file is connected to a javascript file which then draws things on the new cleared canvas.我正在使用回调来执行清除画布，并将 html 文件连接到一个 javascript 文件，然后在新清除的画布上绘制内容。 The first code here is the.html file with the canvas that is being cleared that also has the.js file joined to it.此处的第一个代码是带有正在清除的画布的 .html 文件，该文件还加入了 .js 文件。

I tried context.Rect(x, y, w, h);我试过 context.Rect(x, y, w, h); and canvas.width.canvas.width;和 canvas.width.canvas.width； and neither seem to work.而且似乎都不起作用。 I'm using Chrome我正在使用 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

You've got a typo on this line:你在这一行有一个错字：

context.strokeStyle = #FA8072;

You need quotes:你需要报价：

context.strokeStyle = '#FA8072';

With that fixed it seems to work: http://jsfiddle.net/eMSXU/修复后它似乎可以工作：http: //jsfiddle.net/eMSXU/

(By the way, you might like to press the "Tidy Up" button in the fiddle to see how your code should've been indented...) （顺便说一句，您可能想按小提琴中的“整理”按钮来查看您的代码应该如何缩进...）

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

问题描述

1 个解决方案

解决方案1
0 2012-07-24 00:38:33

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

问题描述

1 个解决方案

解决方案1 0 2012-07-24 00:38:33

解决方案1
0 2012-07-24 00:38:33