<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#mycan {
position: absolute;
left: 400px;
border: 1px solid gray;
}
</style>
</head>
<body>
<canvas id="mycan" height="500" width="500"></canvas>
</body>
</html>
<script type="text/javascript">
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
var canvas = document.getElementById("mycan");
var ctx = canvas.getContext("2d");
var flag = true;
var x, y, r, low;
var dx, dy, ux, uy;//鼠标按下和松开坐标
speed = 5;//设置速度
r = 10;//求大小
$(canvas).bind("mousedown", function (e) {
e = e || event;
dx = e.offsetX;
dy = e.offsetY;
$(canvas).bind("mousemove", function (e) {
e = e || event;
ux = e.offsetX;
uy = e.offsetY;
Createball();
})
})
canvas.onmouseup = function (e) {
$(canvas).unbind("mousemove");
var sx = dx;
var sy = dy;
var speed = Math.sqrt((ux - dx) * (ux - dx) + (uy - dy) * (uy - dy)) / 15;
var jiaodu = Math.atan((uy - dy) / (ux - dx))
var xflag = true, yflag = true;
if (ux - dx > 0) {
xflag = false;
yflag = false;
}
gettran(xflag, speed, jiaodu, sx, sy);
}
function Createball() {
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.globalAlpha = 0.3;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ctx.save()
ctx.beginPath();
ctx.moveTo(dx, dy);
ctx.lineTo(ux, uy);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function gettran(xflag, speed, jiaodu, sx, sy) {
var xi = 0, yi = 0;
var xflagi = xflag;
var yflagi = xflag;
var speedi = speed;
var jiaodui = jiaodu;
var sxi = sx;
var syi = sy;
var low = 0.01;
var s = setInterval(function () {
x = xi * Math.cos(jiaodu);
y = yi * Math.sin(jiaodu);
if (x > 500 - sxi - r) {
xflagi = false;
}
if (x < r - sxi) {
xflagi = true;
}
if (y > (500 - syi * 1 - r * 1)) {
yflagi = false;
if (Math.sin(jiaodui) < 0) {
yflagi = true;
}
}
if (y < (r * 1 - syi * 1)) {
yflagi = true;
if (Math.sin(jiaodui) < 0) {
yflagi = false;
}
}
if (speedi - low <= 0) {
low = speedi;
ctx.save()
ctx.beginPath();
ctx.translate(sxi + x * 1, syi + y * 1);
ctx.clearRect(-r - 1, -r - 1, 2 * r + 2, 2 * r + 2);
ctx.closePath();
ctx.restore();
clearInterval(s)
}
else {
low += 0.03;
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.globalAlpha = 0.3;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
ctx.save()
ctx.beginPath();
ctx.translate(sxi + x * 1, syi + y * 1);
ctx.arc(0, 0, r, Math.PI * 2, 0);
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fill();
ctx.closePath();
ctx.restore();
}
xflagi == true ? xi += speedi - low : xi -= speedi - low;
yflagi == true ? yi += speedi - low : yi -= speedi - low;
}, 1000 / 60)
}
</script>