清除按鈕不能使用我的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畫布

回答

相關問題