Android 调用函数onclick html5中的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10634038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
call a function onclick a button in html5
提问by Laxmi Kant
I want to call a function by touching a button in HTML5. I haveange in a canvas drawn a rect.
我想通过触摸 HTML5 中的按钮来调用一个函数。我在画布上画了一个矩形。
Here is my code:
这是我的代码：
<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>
回答by Sheepy
Since you mentioned 'touch', I guess we'll need a timer. The canvas draw routine also need some fixing. Here is my version:
既然你提到了“触摸”，我想我们需要一个计时器。画布绘制例程也需要一些修复。这是我的版本：
<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>
What this do is when you mouse over it will start calling moveLeft once per second (1000ms interval) until you move away the mouse.
这样做是当您将鼠标悬停在它上面时，它将开始每秒调用一次 moveLeft（间隔 1000 毫秒），直到您移开鼠标为止。
Code is not nice, but it works and I hope it is simple enough to get the point across.
代码不是很好，但它有效，我希望它足够简单，可以理解这一点。
回答by scessor
Here an example moving all directions and border checking:
这是一个移动所有方向和边界检查的示例：
HTML:
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:
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:
CSS：
#canvas {
width: 200;
height: 300px;
border: 1px solid red;
}
Also see this example.
另请参阅此示例。
回答by Adil
You can to give fill style to make your rectangle visible or draw it border. Secondly you want to attach event to button to move the rectangle drawn on canvas. The could be done by this code and could mold the code according to your need. Demo on JsFiddle using Javascriptand Demo on JsFiddle using jQuery
您可以提供填充样式以使您的矩形可见或绘制它的边框。其次，您想将事件附加到按钮以移动画布上绘制的矩形。可以通过此代码完成，并可以根据您的需要塑造代码。使用 Javascript在 JsFiddle 上的演示和使用 jQuery 在 JsFiddle 上的演示
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;
}
);?
