在html5中调用一个函数onclick一个按钮答案

【问题标题】：call a function onclick a button in html5在html5中调用一个函数onclick一个按钮
【发布时间】：2012-05-17 10:31:28
【问题描述】：

我想通过触摸 HTML5 中的按钮来调用函数。我在画布上画了一个矩形。

这是我的代码：

<body>
<canvas id="canvas" width="200" height="300"></canvas>
<button id="as" type="button">Left</button></body>
<script>
    var inc=10;
    var c=document.getElementById("canvas");
    ctx = c.getContext("2d");
    ctx.fillRect(x,0,150,75);
    function moveLeft(){ x+=inc }
</script>

【问题讨论】：

是的。和？你有什么问题？
那么你有什么尝试？附加事件处理程序是一个太宽泛的主题，无法在问答网站上正确教授。你可以期待一些c.onclick = moveLeft; 的答案，但不要听他们的。请仔细阅读此MDN tutorial。
我想通过触摸按钮来移动画布。像 ontouch.rectangle 移动 10px
我建议阅读quirksmode.org/js/introevents.html 以了解有关事件和事件处理的基础知识。

标签： javascript android html touch

【解决方案1】：

既然你提到了“触摸”，我想我们需要一个计时器。画布绘制例程也需要一些修复。这是我的版本：

<html><body>
<canvas id="canvas" width="200" height="300" style='border:1px solid black'></canvas>
<button id="as" type="button" onmouseover='startMove()' onmouseout='stopMove()'>Left</button></body>
<script>
    var c=document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var inc = 10;
    var timer = 0;
    var x = 100;
    function moveLeft(){ if ( x > 0 ) x-=inc; drawCtx(); }
    function drawCtx(){ ctx.clearRect(0,0,200,300); ctx.fillStyle='black'; ctx.fillRect(x,0,50,75); }
    function startMove(){ stopMove(); timer = setInterval(moveLeft, 1000);  }
    function stopMove(){ clearInterval(timer); }
    drawCtx();
</script>

当你将鼠标悬停在它上面时，它会开始每秒调用一次 moveLeft（1000 毫秒间隔），直到你移开鼠标。

代码不是很好，但它可以工作，我希望它足够简单，可以理解这一点。

【讨论】：

touch === timer ?没看懂
@pomeh：不完全是。但我想目的是只要鼠标一直触摸按钮就移动一个框，在这种情况下，我们需要一个间隔计时器或一些替代方案（例如新的 requestAnimationFrame）来保持它移动。
好的，我明白了。好吧，对我来说touching a button 更多的是关于触摸事件，但我们没有足够的信息来了解更多。 @LaxmiKant 的意图是什么？
我想通过在移动设备（Android）中触摸该按钮来移动画布
@LaxmiKant：我明白了。 Android 是另一回事，这一点也应该在问题中标记（并标记）。我没有尝试过，但如果 mouseover/mouseout 不起作用，您可以尝试那些真正的触摸事件或使用 mousedown/mouseup，我暂时没有时间在 Android 上进行测试。

【解决方案2】：

这里是一个移动所有方向和边界检查的例子：

HTML：

<canvas id="canvas"></canvas><br>
<button type="button" onclick="moveRect(0, -10);">move up</button><br>
<button type="button" onclick="moveRect(-10, 0);">move left</button>
<button type="button" onclick="moveRect(+10, 0);">move right</button><br>
<button type="button" onclick="moveRect(0, +10);">move down</button>

JS：

var c = null, ctx = null, x = 0, y = 0;
var width = 150, height = 75;

function moveRect(x2, y2) {
    ctx.clearRect(x, y, width, height);
    x += x2;
    if (x < 0) x = 0;
    else if (x > c.width - width) x = c.width - width;
    y += y2;
    if (y < 0) y = 0;
    else if (y > c.height - height) y = c.height - height;
    ctx.fillRect(x, y, width, height);
}

window.onload = function() {
    c = document.getElementById("canvas");
    ctx = c.getContext("2d");
    x = 0;
    moveRect(0, 0);
}

CSS：

#canvas {
    width: 200;
    height: 300px;
    border: 1px solid red;
}

另见this example。

【讨论】：

【解决方案3】：

您可以赋予填充样式以使矩形可见或绘制边框。其次，您想将事件附加到按钮以移动画布上绘制的矩形。可以通过此代码完成，并且可以根据您的需要对代码进行建模。 Demo on JsFiddle using Javascript 和 Demo on JsFiddle using jQuery

x =200;
$('#as').click(function()
{    
    var inc=10;
    var c=document.getElementById("canvas");
    //c.style.backgroundColor = "#ff0000";
    ctx = c.getContext("2d");    


    ctx.fillStyle="#ff0000";    
    ctx.fillRect(x+5,0,15,75);


    ctx.fillStyle="#ffffff";    
    ctx.fillRect(x,0,15,75);
    x-=5;
}
);

【讨论】：

感谢提醒，我修改了答案，希望现在可以了。