Кнопка очистки не работает с моим javascript и hmtl5 canvas

Я очень новичок в этом, и я пытаюсь создать программу рисования подписи в html, canvas и javascript.Кнопка очистки не работает с моим javascript и hmtl5 canvas

Im пытается получить кнопку очистки, работающую с этой функцией;

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

Неверный номер. Измените свой идентификатор или измените линию 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 canvas

ответ

Смежные вопросы