함수를 호출하여 html5의 버튼을 클릭하십시오.

HTML5의 버튼을 터치하여 함수를 호출하고 싶습니다. 캔버스에 캔버스에 그려진 캔버스가 있습니다.함수를 호출하여 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>

출처

2012-05-17 Laxmi Kant

예. 과? 귀하의 질문은 무엇인가? – KooiInc

그래서 뭘 하려구? 이벤트 핸들러를 부착하는 것은 Q & A 사이트에서 올바르게 가르치기에는 너무 광범위한 주제입니다. 'c.onclick = moveLeft;'답변을 기대할 수는 있지만 응답하지 않습니다. 이 [MDN 튜토리얼] (https://developer.mozilla.org/en/DOM/element.addEventListener)을 읽어보십시오. – kapa

나는 버튼을 만져서 캔버스를 움직이고 싶다 ontouch.rectangle move by 10px –

당신은 볼 수 귀하의 사각형을 만들거나 그것을 경계를 그릴 채우기 스타일을 제공 할 수 있습니다

여기 내 코드입니다. 둘째, 이벤트를 버튼에 첨부하여 캔버스에 그려진 사각형을 이동 시키려고합니다. 이 코드로 수행 할 수 있으며 필요에 따라 코드를 작성할 수 있습니다. Demo on JsFiddle using Javascript 및

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

출처

2012-05-17 10:50:58 Adil

당신은 jQuery를 사용하고 있다고 언급해야합니다 ... –

상기시켜 주셔서 감사 드리며 제 대답을 수정했습니다. – Adil

당신이 '터치'를 언급 한 이후 Demo on JsFiddle using jQuery, 나는 우리가 타이머를해야합니다 같아요. 캔버스 그리기 루틴도 약간의 수정이 필요합니다. 여기 내 버전 :

위에 당신이 마우스 moveLeft를 호출 시작할 때이 할 일이 무엇

<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>

초에 한 번 (1000MS 간격) 마우스를 멀리 이동까지 당.

코드가 좋지는 않지만 효과가 있으며, 요점을 파악하기에 충분히 간단합니다. 여기

출처

2012-05-17 10:53:20 Sheepy

'touch' ==='timer'? 나는 그것을 이해하지 못합니다. – pomeh

@pomeh : 정확히는 아닙니다. 그러나 마우스가 버튼을 계속 누르고있는 한 상자를 이동하려는 의도가 있다고 생각합니다.이 경우 간격 타이머 또는 일부 대체 (예 : 새 requestAnimationFrame)가 필요합니다. – Sheepy

모두에게 감사합니다. –

모든 방향과 경계 검사 이동 예 :

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 참조.

출처

2012-05-17 11:06:23 scessor

함수를 호출하여 html5의 버튼을 클릭하십시오.

답변

관련 문제