使用定义的边界在HTML5画布中拖动图像
我正在研究HTML5 Canvas 2D，有没有什么功能可以帮助像下面的链接给出的例子 -
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/
以下是链接和代码。 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>
如果你想要一个关于如何在HTML5 Canvas中使对象可拖动的干净教程，我已经在这里编写了一个有很多解释的教程。
对于您在画布上绘制的每个对象，您可能还需要给它一些“限制边界”，如limitX，limitY，limitWidth，limitHeight等。然后在拖动时需要确保它仍然存在在这些范围内。 如果它超出界限，你只会强迫它靠近它试图被拖出的那一边。
链接地址: http://www.djcxy.com/p/63965.html