我刚开始学习html5,我正在尝试用可拖动的船创建战舰界面.我需要帮助使我的拖动方法有效.我故意不使用库,因为我需要让船只在另一个画布界面(战舰板)上拖拽,我无法弄清楚如何处理Kinetic库.我觉得我很亲近,但我无法弄清楚最后一点.这些船应该被平稳地拖动但是它们在点击时似乎会抓住鼠标的位置......
这是我的clode:
<!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; …