清除按钮不能使用我的javascript和hmtl5画布

对此我很新颖，我正尝试在html，canvas和javascript中创建签名绘图程序。清除按钮不能使用我的javascript和hmtl5画布

我试图得到清除按钮使用此功能;

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>

感激所有帮助我可以得到！

来源

2016-04-25 Joel Andersson

您的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); 
}

它的工作原理。

来源

2016-04-25 09:48:42

var canvas = document.getElementById('canvas')指向这个div <div id="canvas">不是你的画布。它应该是document.getElementById('bildruta')

来源

2016-04-25 09:50:25

清除按钮不能使用我的javascript和hmtl5画布

回答

相关问题