Ausführen von Javascript-Datei auf klicken

Question

Dies ist ein JavaScript-Code zum Zeichnen von Linien auf Leinwand.

var canvas, 
context, 
dragging = false, 
dragStartLocation, 
snapshot; 


function getCanvasCoordinates(event) { 
    var x = event.clientX - canvas.getBoundingClientRect().left, 
     y = event.clientY - canvas.getBoundingClientRect().top; 

    return {x: x, y: y}; 
} 

function takeSnapshot() { 
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height); 
} 

function restoreSnapshot() { 
    context.putImageData(snapshot, 0, 0); 
} 


function drawLine(position) { 
    context.beginPath(); 
    context.moveTo(dragStartLocation.x, dragStartLocation.y); 
    context.lineTo(position.x, position.y); 
    context.stroke(); 
} 

function dragStart(event) { 
    dragging = true; 
    dragStartLocation = getCanvasCoordinates(event); 
    takeSnapshot(); 
} 

function drag(event) { 
    var position; 
    if (dragging === true) { 
     restoreSnapshot(); 
     position = getCanvasCoordinates(event); 
     drawLine(position); 
    } 
} 

function dragStop(event) { 
    dragging = false; 
    restoreSnapshot(); 
    var position = getCanvasCoordinates(event); 
    drawLine(position); 
} 

function init() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext('2d'); 
    context.strokeStyle = 'black'; 
    context.lineWidth = 6; 
    context.lineCap = 'round'; 

    canvas.addEventListener('mousedown', dragStart, false); 
    canvas.addEventListener('mousemove', drag, false); 
    canvas.addEventListener('mouseup', dragStop, false); 
    } 

Wie kann ich eine Schaltfläche hinzufügen, so dass beim Klicken auf den Code ausgeführt werden? Wie kann ich das machen? Ein Beispiel unten ist die Sache

<input type="BUTTON" value="Exit" onclick="execute the javascript file to draw line" > 

Answer 1

Zuerst würde ich das "Knopf" -Tag anstelle von "Eingabe" für bessere Semantik verwenden. Zweitens, geben Sie dem Button einen "onclick" -Parameter und setzen Sie ihn gleich Ihrer "init" -Funktion.

<button name="draw-line" onclick="init()" 

Answer 2

zunächst zu klären, müssen Sie die JS-Datei in Ihrem HTML enthalten:

<script src='file.js'></script> 

dann können Sie die init() Funktion Onclick ausführen: