清除按钮不适用于我的javascript和hmtl5画布_Javascript_Html_Canvas

清除按钮不适用于我的javascript和hmtl5画布

javascript html canvas

清除按钮不适用于我的javascript和hmtl5画布,javascript,html,canvas,Javascript,Html,Canvas,我在这方面很新，我正在尝试用html、canvas和javascript创建一个签名绘图程序我试图让清除按钮与此功能一起工作 function clearCanvas() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); 但它似乎不起作用。我

我在这方面很新，我正在尝试用html、canvas和javascript创建一个签名绘图程序

我试图让清除按钮与此功能一起工作

function clearCanvas() {
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height);

但它似乎不起作用。我真的不知道在js脚本中，在html代码中把要执行的函数放在哪里

这是html代码：

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="uppgift-6.js"></script>
    <title>Uppgift6</title>
    <style type="text/css">
      #canvas { position: relative; }
      #bildruta { border: 2px solid #000; }
      body {font-family: Calibri}
      h2 {font-size: 150%; color: BLACK; background-color: BEIGE; padding:  20px; margin: 5px auto; text-align: center;}
    </style>
  </head>
  <body>
    <h2>Signatur</h2>
    <div id="canvas">
      <canvas id="bildruta" width="600" height="400"></canvas>
    </div>
    <button type="button" onclick="clearCanvas()"> Clear signature </button>
  </body>
</html>


UPPGIT6
#画布{位置：相对；}
#bildruta{边界：2px固体#000；}
正文{font-family:Calibri}
h2{字体大小：150%；颜色：黑色；背景色：米色；填充：20px；边距：5px自动；文本对齐：中间；}
签名
清晰的签名

感谢所有我能得到的帮助

您的ID不正确。更改您的id或更改JS行，如下所示：

function clearCanvas() {
   var canvas = document.getElementById('bildruta'); // that's the correct ID
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height);
}

它可以工作。

var canvas=document.getElementById（'canvas'）指向这个div

而不是您的画布。它应该是

document.getElementById（'bildruta'）