點擊執行Javascript文件

-2

這是一個用於在畫布上繪製線條的JavaScript代碼。點擊執行Javascript文件

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

如何添加一個按鈕，以便當按鈕點擊代碼執行？我怎樣才能做到這一點？一個例子如下，以澄清事情

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

來源

2016-11-30 Meta_Data

有你搜尋它在谷歌 – Mahi

這正是你只是寫「爲例」 – Hammerbot

@El_Matella當行按鈕獲取激活我不能使用免費的繪圖工具。我怎麼能避免這種情況？ –

-1

首先，我會使用「button」標記而不是「input」來獲得更好的語義。其次，給這個按鈕一個「onclick」參數並將其設置爲等於你的「init」函數。

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

來源

2016-11-30 18:07:42

首先，你需要在你的HTML的js文件：

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

然後，你可以的onclick執行init（）函數：

<input type="BUTTON" value="Exit" onclick="init()" >

來源

2016-11-30 18:01:29 xShirase

downvoted，真的嗎？說什麼已被接受爲答案，只有更多的細節？好的，然後... – xShirase

爲什麼你總是與投票。這是OP的優先。無論他想要什麼 – Mahi

點擊執行Javascript文件

回答

相關問題