drag-html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
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 = 400;
var HEIGHT = 300;
var dragok = false;
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";
rect(x - 15, y - 15, 30, 30);
}
function myMove(e){
if (dragok){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e){
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}
function myUp(){
dragok = false;
canvas.onmousemove = null;
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
</section>
</body>
</html>
最新文章
- iOS关于通知传值Bool类型的注意点
- [8.2] Robot in a Grid
- 无法连接虚拟设别 ide1:0.
- 在iframe父界面获取iframe里面的标签
- XSLT函数集合:数值函数、字符串函、节点集函数和布尔函数
- Storyboard中segue(转场)使用
- NetBios网络基础及编程
- Quest Central for DataBase 5.0.1,6.1 (软件+注册)
- BZOJ 1613: [Usaco2007 Jan]Running贝茜的晨练计划( dp)
- Dynamics 365-Full Text Index on Stopwords
- linux无法联网使用yum提示cannot find a valid baseurl for repobase7x86_64
- tcpdump完全指南
- 程序性能调优工具之gprob
- MarginTop 为何影响父元素的 MarginTop(转)
- Linux中/etc/resolv.conf文件简析
- C# 接收form表单中多个相同name值的问题
- 使用sqoop过程
- Java8 新特性Stream 的学习和使用方法
- Math.Celing、Math.Floor、Math.DivRem与Math.BigMul
- SDUT 3929