Javascript 如何在画布上创建HTML5可拖动对象？
我刚开始学习html5，我正在尝试创建一个战列舰界面和拖拉战舰。我需要帮助使我的拖动方法工作。我故意不使用库，因为我需要使舰船在另一个画布界面（战列舰板）上拖动，我不知道如何使用动能库。我觉得我很接近，但我想不出最后一点。船只应该被平稳地拖动，但当点击时，它们似乎会捕捉到鼠标的位置 这是我的名片：Javascript 如何在画布上创建HTML5可拖动对象？,javascript,html,canvas,draggable,Javascript,Html,Canvas,Draggable,我刚开始学习html5，我正在尝试创建一个战列舰界面和拖拉战舰。我需要帮助使我的拖动方法工作。我故意不使用库，因为我需要使舰船在另一个画布界面（战列舰板）上拖动，我不知道如何使用动能库。我觉得我很接近，但我想不出最后一点。船只应该被平稳地拖动，但当点击时，它们似乎会捕捉到鼠标的位置 这是我的名片： <!doctype html> <html> <head> <meta charset="UTF-8" /> &
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div align=center>
<canvas id="canvas" width="550" height="550">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 550;
var HEIGHT = 550;
var dragok = false;
var ships = [];
var ship;
var shipFill = "#FF0000";
//Definitions
//Draggable Carrier
var caRectX = 100;
var caRectY = 50;
var caRectHeight = 50;
var caRectWidth = 5 * 50;
var carrier = {
x : caRectX,
y : caRectY,
width : caRectWidth,
height : caRectHeight,
fill : shipFill,
dragging : false,
offsetX : 0,
offsetY : 0,
};
ships.push(carrier);
//Draggable Battleship
var bsRectX = 100;
var bsRectY = 150;
var bsRectHeight = 50;
var bsRectWidth = 4 * 50;
var battleship = {
x : bsRectX,
y : bsRectY,
width : bsRectWidth,
height : bsRectHeight,
fill : shipFill,
dragging : false,
offsetX : 0,
offsetY : 0,
};
ships.push(battleship);
//Draggable Patrolboat
var pbRectX = 100;
var pbRectY = 250;
var pbRectHeight = 50;
var pbRectWidth = 2 * 50;
var patrolboat = {
x : pbRectX,
y : pbRectY,
width : pbRectWidth,
height : pbRectHeight,
fill : shipFill,
dragging : false,
offsetX : 0,
offsetY : 0,
};
ships.push(patrolboat);
//Draggable Submarine
var suRectX = 100;
var suRectY = 350;
var suRectHeight = 50;
var suRectWidth = 3 * 50;
var submarine = {
x : suRectX,
y : suRectY,
width : suRectWidth,
height : suRectHeight,
fill : shipFill,
dragging : false,
offsetX : 0,
offsetY : 0,
};
ships.push(submarine);
//Draggable destroyer
var deRectX = 100;
var deRectY = 450;
var deRectHeight = 50;
var deRectWidth = 3 * 50;
var destroyer = {
x : deRectX,
y : deRectY,
width : deRectWidth,
height : deRectHeight,
dragging : false,
fill : shipFill
};
ships.push(destroyer)
function rect(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "#444444";
for (var i = 0; i < ships.length; i++) {
rect(ships[i].x, ships[i].y, ships[i].width, ships[i].height);
}
}
function myMove(e) {
if (ship.dragging) {
ship.x = e.pageX - canvas.offsetLeft;
ship.y = e.pageY - canvas.offsetTop;
draw()
}
}
function myDown(e) {
ship = getClickedShip(e.pageX,e.pageY);
if (ship!=null) {
ship.x = e.pageX - canvas.offsetLeft;
ship.y = e.pageY - canvas.offsetTop;
ship.dragging = true;
canvas.onmousemove = myMove();
}
}
function myUp() {
ship.dragging = false;
canvas.onmousemove = null;
}
function getClickedShip(sx,sy){
for (var i = 0; i < ships.length; i++){
if(sx > (ships[i].x )+ canvas.offsetLeft && sx < (ships[i].x+ships[i].width+ canvas.offsetLeft) && sy > (ships[i].y + canvas.offsetTop) && sy < (ships[i].y+ships[i].height))
return ships[i];
}
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
</section>
</body>
</html>
画布拖放测试
如果您的浏览器不支持HTML5画布，则会显示此文本。
var帆布；
var-ctx；
var x=75；
变量y=50；
var宽度=550；
var高度=550；
var-dragok=false；
var=[]；
var船舶；
var shipFill=“#FF0000”；
//定义
//牵引式运载器
var-caRectX=100；
var-caRectY=50；
var caRectHeight=50；
var caRectWidth=5*50；
无功载波={
x:caRectX，
y:小心，
宽度：caRectWidth，
高度：小心高度，
填充：shipFill，
拖动：false，
抵销额：0，
副职：0，
};
船舶.推（载）轮；
//拖拉战舰
var bsRectX=100；
var Bstrcy=150；
var bsRectHeight=50；
var bsRectWidth=4*50；
战列舰={
x:bsRectX，
y:B直截了当，
宽度：bRectWidth，
高度：b直线高度，
填充：shipFill，
拖动：false，
抵销额：0，
副职：0，
};
推进（战列舰）；
//拖拉巡逻艇
var pbRectX=100；
var pbRectY=250；
var pbRectHeight=50；
var pRectWidth=2*50；
巡逻艇={
x:pbRectX，
y:pbRectY，
宽度：pbRectWidth，
高度：pbrect高度，
填充：shipFill，
拖动：false，
抵销额：0，
副职：0，
};
船舶。推（巡逻艇）；
//拖拉式潜艇
var-suRectX=100；
var-suRectY=350；
var suRectHeight=50；
var suRectWidth=3*50；
无功潜艇={
x:suRectX，
y:当然，
宽度：suRectWidth，
高度：绝对高度，
填充：shipFill，
拖动：false，
抵销额：0，
副职：0，
};
船舶.推进（潜艇）；
//拖拽式驱逐舰
var deRectX=100；
var deRectY=450；
var deRectHeight=50；
var deRectWidth=3*50；
var销毁程序={
x:deRectX，
y:deRectY，
宽度：deRectWidth，
高度：deRectHeight，
拖动：false，
填充：船舶填充
};
船舶.推进（驱逐舰）
函数rect（x，y，w，h）{
ctx.beginPath（）；
ctx.rect（x，y，w，h）；
ctx.closePath（）；
ctx.fill（）；
}
函数clear（）{
ctx.clearRect（0，0，宽度，高度）；
}
函数init（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
返回设置间隔（抽签，10）；
}
函数绘图（）{
清除（）；
ctx.fillStyle=“#FAF7F8”；
矩形（0，0，宽度，高度）；
ctx.fillStyle=“#4444”；
对于（变量i=0；i（ships[i].x）+canvas.offsetLeft&&sx<（ships[i].x+ships[i].width+canvas.offsetLeft）和&sy>（ships[i].y+canvas.offsetTop）和&sy<（ships[i].y+ships[i].heig
function handleMouseDown(e){
// get the current mouse position relative to the canvas
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// save this last mouseX/mouseY
lastX=mouseX;
lastY=mouseY;
// set the mouseIsDown flag
mouseIsDown=true;
}
function handleMouseUp(e){
// clear the mouseIsDown flag
mouseIsDown=false;
}
function handleMouseMove(e){
// if the mouseIsDown flag is’nt set, no work to do
if(!mouseIsDown){ return; }
// get mouseX/mouseY
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// for each ship in the ships array
// use context.isPointInPath to test if it’s being dragged
for(var i=0;i<ships.length;i++){
var ship=ships[i];
drawShip(ship);
if(ctx.isPointInPath(lastX,lastY)){
// if this ship’s being dragged,
// move it by the change in mouse position from lastXY to currentXY
ship.x+=(mouseX-lastX);
ship.y+=(mouseY-lastY);
ship.right=ship.x+ship.width;
ship.bottom=ship.y+ship.height;
}
}
// update the lastXY to the current mouse position
lastX=mouseX;
lastY=mouseY;
// draw all ships in their new positions
drawAllShips();
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="lightgray";
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var mouseIsDown=false;
var lastX=0;
var lastY=0;
var ships=[];
// make some ship
makeShip(20,30,50,25,"skyblue");
makeShip(20,100,30,25,"skyblue");
makeShip(20,170,50,25,"salmon");
makeShip(20,240,30,25,"salmon");
function makeShip(x,y,width,height,fill){
var ship={
x:x,
y:y,
width:width,
height:height,
right:x+width,
bottom:y+height,
fill:fill
}
ships.push(ship);
return(ship);
}
drawAllShips();
function drawAllShips(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<ships.length;i++){
var ship=ships[i]
drawShip(ship);
ctx.fillStyle=ship.fill;
ctx.fill();
ctx.stroke();
}
}
function drawShip(ship){
ctx.beginPath();
ctx.moveTo(ship.x,ship.y);
ctx.lineTo(ship.right,ship.y);
ctx.lineTo(ship.right+10,ship.y+ship.height/2);
ctx.lineTo(ship.right,ship.bottom);
ctx.lineTo(ship.x,ship.bottom);
ctx.closePath();
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// mousedown stuff here
lastX=mouseX;
lastY=mouseY;
mouseIsDown=true;
}
function handleMouseUp(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// mouseup stuff here
mouseIsDown=false;
}
function handleMouseMove(e){
if(!mouseIsDown){ return; }
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// mousemove stuff here
for(var i=0;i<ships.length;i++){
var ship=ships[i];
drawShip(ship);
if(ctx.isPointInPath(lastX,lastY)){
ship.x+=(mouseX-lastX);
ship.y+=(mouseY-lastY);
ship.right=ship.x+ship.width;
ship.bottom=ship.y+ship.height;
}
}
lastX=mouseX;
lastY=mouseY;
drawAllShips();
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>