拖动图像在HTML5画布具有定义的边界

下面的链接和代码。 http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

<html> 
    <head> 
    </head> 
    <body> 
    <section> 
    <div> 
    <canvas id="canvas5" height="300" width="400"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> 
    </div> 
    <script type="text/javascript"> 
    var canvas5; 
    var ctx5; 
    var x5 = 75; 
    var y5 = 50; 
    var dx5 = 5; 
    var dy5 = 3; 
    var WIDTH5 = 400; 
    var HEIGHT5 = 300; 
    var dragok = false; 
    function rect(x,y,w,h) { 
    ctx5.beginPath(); 
    ctx5.rect(x,y,w,h); 
    ctx5.closePath(); 
    ctx5.fill(); 
    } 
    function clear() { 
    ctx5.clearRect(0, 0, WIDTH5, HEIGHT5); 
    } 
    function init() { 
    canvas5 = document.getElementById("canvas5"); 
    ctx5 = canvas5.getContext("2d"); 
    return setInterval(draw5, 10); 
    } 
    function draw5() { 
if(x5>10 && x5<350 && y5>10 && y5<350) 
{ 
    clear(); 
    ctx5.fillStyle = "#FAF7F8"; 
    rect(0,0,WIDTH5,HEIGHT5); 
    ctx5.fillStyle = "#444444"; 
    rect(x5 - 15, y5 - 15, 30, 30); 
    } 
    } 
    function myMove(e){ 
    if (dragok){ 
    x5 = e.pageX - canvas5.offsetLeft; 
    y5 = e.pageY - canvas5.offsetTop; 
    } 
    } 
    function myDown(e){ 
    if (e.pageX < x5 + 15 + canvas5.offsetLeft) 
    if (e.pageX > x5 - 15 + canvas5.offsetLeft) 
    if (e.pageY < y5 + 15 + canvas5.offsetTop) 
    if (e.pageY > y5 -15 + canvas5.offsetTop){ 
    x5 = e.pageX - canvas5.offsetLeft; 
    y5 = e.pageY - canvas5.offsetTop; 
    dragok = true; 
    canvas5.onmousemove = myMove; 
    } 
    } 
    function myUp(){ 
    dragok = false; 
    canvas5.onmousemove = null; 
    } 
    init(); 
    canvas5.onmousedown = myDown; 
    canvas5.onmouseup = myUp; 
    </script> 
    </section> 
    </body> 
    </html>

来源

2012-03-27 11:19:13 Maneesh

Maneesh谢谢，但我想是这样给出的图像 - 图像，鹰剪贴画是不是在画布上移出定义的边界假设我们有固定的边界剪贴画开始点（10,10）到（ 350,350） http://plus.google.com/u/0/photos/109906204570243538818/albums/5724543242938487617 – 2012-03-27 11:53:52

您可以使用draw5函数中的条件来执行此操作... if（x5> 10 && x5 <350 && y5> 10 && y5 < 350）..编辑答案。 – Maneesh 2012-03-27 12:11:58

好的会的。再次感谢 – 2012-03-27 13:33:51

如果你想就如何使对象可拖动的HTML5 Canvas中我写的教程有很多的解释here干净的教程。

对于您在画布上绘制的每个对象，您可能还需要给它一些“限制边界”，如limitX，limitY，limitWidth，limitHeight等。然后在拖动时需要确保它仍然在这些范围内。如果它超出界限，你只会强迫它靠近它试图被拖出的那一边。

来源

2012-03-27 14:52:21

拖动图像在HTML5画布具有定义的边界

回答

相关问题