<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myCanvas {
box-shadow: 0 0 0 10px red;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
var xx = 300;
var yy = 300;
function yuanlai() {
context.fillStyle = "blue";
context.fillRect(150, 150, 100, 100);
context.fill();
}
yuanlai();
context.translate(xx, yy);
function draw() {
context.fillStyle = "#000000";
context.fillRect(-50, -50, 100, 100);
context.fill();
}
draw();
myCanvas.onmousedown = function(e) {
var x = e.offsetX;
var y = e.offsetY;
var sx = x;
var sy = y;
if(x - xx >= -50 && x - xx <= 50 && y - yy >= -50 && y - yy <= 50) {
document.onmousemove = function(ev) {
var ex = ev.offsetX;
var ey = ev.offsetY;
var cx = ex - sx;
var cy = ey - sy;
sx = ex;
sy = ey;
xx = xx + cx;
yy = yy + cy;
if(xx + 50 > 600 || xx - 50 < 0) {
xx = xx - cx;
cx = 0;
}
if(yy + 50 > 600 || yy - 50 < 0) {
yy = yy - cy;
cy = 0;
}
context.translate(cx, cy);
context.clearRect(-xx - 200, -yy - 200, 1000, 1000)
draw();
context.save();
context.translate(-xx, -yy);
yuanlai();
context.restore();
if(xx+50 > 150 && xx-50 < 250 && yy+50 > 150 && yy-50 < 250) {
console.log("碰到了");
}
}
}
}
document.onmouseup = function() {
document.onmousemove = function() {
}
}
</script>
</html>
拖拽
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 转载注明出处:简书-十个雨点 简介 拖拽操作在现在的智能手机中并不少见,老罗的OneStep更是把拖拽做成了一种令...
- jsonp 因为jsonp不是使用XMLHttpRequest对象 在移动端不用鼠标事件 touch事件 ...
- //联系人:石虎QQ: 1224614774昵称:嗡嘛呢叭咪哄 #import"ViewController.h"...