将两个函数附加到事件处理程序

Question

I am working on html 5 canvas and I am trying to take two points as input from users and then made a line pass through them. 我正在html 5 canvas上工作，我试图从用户那里获取两点作为输入，然后使一条线穿过它们。 For it I need to attach two functions to event handler but it isn't working. 为此，我需要将两个函数附加到事件处理程序，但是它不起作用。 Following is my codes for JavaScript and html 5. 以下是我的JavaScript和html 5代码。
Also is there any way to accomplish it? 还有什么办法可以做到呢？ Browser used: Google chrome 使用的浏览器：谷歌浏览器

JavaScript Code: JavaScript代码：

var c = document.getElementById("myCanvas");
var graph = c.getContext("2d");
var posX = 100;
var posY = 50;
var finalX = posX;
var finalY = posY;
var array = [[]];
var i = 0;
c.width = window.innerWidth;
c.height = window.innerHeight;
graph.strokeRect(100,50,1000,500)

// for making graph 
while(finalY < 550)
{
    finalY +=10;
    graph.beginPath();
    graph.moveTo(posX , finalY);
    graph.lineTo(posX + 1000, finalY);
    if(finalY == 300) {
        graph.lineWidth = 2;
        graph.strokeStyle = "#000000";

    } else {
        graph.strokeStyle = "#000000";
        graph.lineWidth = 1;
    }
    graph.stroke();
}
while(finalX <1100) {
    finalX += 10;
    graph.beginPath();
    graph.moveTo(finalX, posY);
    graph.lineTo(finalX, posY + 500);
    if(finalX == 600) {
        graph.lineWidth = 2;
        graph.strokeStyle = "#000000";

    } else {
        graph.lineWidth = 1;
        graph.strokeStyle = "#000000";
    }

    graph.stroke();
}

// for making rectangle wherever the user clicks
function rect(e) {
    var ctx = c.getContext("2d");
    var x = e.clientX;
    var y = e.clientY;
    var j = 0;
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.fillRect(x,y,5,5);
    array[i][j] = x;
    array [i][j+1] = y;
}

var joinPts = function() {
    graph.beginPath();
    graph.moveTo(array[0][0],array[0][1]);
    graph.lineTo(array[1][0],array[1][1]);
    graph.strokeStyle = "#000000";
    graph.lineWidth = 2;
    graph.stroke();
}

function add() {
    i+=1;
}

function combine() {
    rect();
    add();
}

function initialise() {
    c.addEventListener("click", function (){combine();}, false);
    // c.addEventListener("click", rect , false); This way also it isn't working
    // c.addEventListener("click", add , false);
}

HTML Code: HTML代码：

<!DOCTYPE HTML>
<html>
<head>
    <title>Canvas!!</title>
</head>
<body style="background:white" onload="initialise()">
    <canvas id="myCanvas" style="background:#f6f6f6"></canvas>

    <button name="Reset" type="reset" onclick="window.location.reload();">Reset</button>
    <button name="Join" type="submit" onclick="joinPts">Join</button>

    <footer>
        <script src="main.js"></script>
    </footer>   
</body>
</html>

Answer 1

You need to actually call the joinPts function in your onclick . 您实际上需要在onclick调用joinPts函数。

Replace: 更换：

onclick="joinPts"

With: 带有：

onclick="joinPts()"

Also, your combined function is lacking the e event parameter: 此外，您的combined函数缺少e事件参数：

function combine(e) { // Accept a `e` parameter,
    rect(e);         // and pass it to `rect`.
    add();
}

function initialise() {
    c.addEventListener("click", combine, false); // No need to wrap `combine` in a function
}

将两个函数附加到事件处理程序

问题描述

1 个解决方案

解决方案1
0 2015-06-11 06:41:26

将两个函数附加到事件处理程序

问题描述

1 个解决方案

解决方案1 0 2015-06-11 06:41:26

解决方案1
0 2015-06-11 06:41:26