效果示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
html,body{
margin :0 0;
padding: 0 0;
width: 100%;
height: 100%;
}
</style>
<body>
<canvas id="cav" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("cav");
var ctx = canvas.getContext("2d");
var origin = {
x : 300,
y : 300,
r : 20
};
ctx.globalCompositeOperation = "lighter";
function drawOrigin(){
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(origin.x,origin.y,origin.r,0,Math.PI * 2);
ctx.fill();
}
drawOrigin();
function windowToCanvas(x,y){
var bbox = canvas.getBoundingClientRect();
return {
x : x - bbox.left * (canvas.width / bbox.width),
y : y - bbox.top * (canvas.height / bbox.height),
};
}
canvas.onmousedown = function(){
};
canvas.onmousemove = function(e){
var loc = windowToCanvas(e.clientX,e.clientY);
ctx.clearRect(0,0,canvas.width,canvas.height);
var angle = Math.atan(Math.abs(loc.y - origin.y) / Math.abs(loc.x - origin.x));
var radian = angle * Math.PI / 180;
drawOrigin();
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(loc.x,loc.y,origin.r + 10,0,Math.PI * 2);
ctx.fill();
var k3 = {
x : origin.x - origin.r * Math.sin(angle),
y : origin.y - origin.r * Math.cos(angle)
};
var k4 = {
x : origin.x + origin.r * Math.sin(angle),
y : origin.y + origin.r * Math.cos(angle)
};
var k1 = {
x : loc.x - (origin.r + 10) * Math.sin(angle),
y : loc.y - (origin.r + 10) * Math.cos(angle)
};
var k2 = {
x : loc.x + (origin.r + 10) * Math.sin(angle),
y : loc.y + (origin.r + 10) * Math.cos(angle)
};
if((loc.x > origin.x && loc.y > origin.y) || (loc.x < origin.x && loc.y < origin.y)){
var k3 = {
x : origin.x - origin.r * Math.sin(angle),
y : origin.y + origin.r * Math.cos(angle)
};
var k4 = {
x : origin.x + origin.r * Math.sin(angle),
y : origin.y - origin.r * Math.cos(angle)
};
k1 = {
x : loc.x - (origin.r + 10) * Math.sin(angle),
y : loc.y + (origin.r + 10) * Math.cos(angle)
};
k2 = {
x : loc.x + (origin.r + 10) * Math.sin(angle),
y : loc.y - (origin.r + 10) * Math.cos(angle)
};
}
ctx.beginPath();
// console.log(k1);
// console.log(k2);
// console.log(k3);
// console.log(k4);
if((loc.x > origin.x && loc.y > origin.y) || (loc.x < origin.x && loc.y < origin.y)){
ctx.moveTo(k2.x,k2.y);
ctx.lineTo(k1.x,k1.y);
ctx.quadraticCurveTo((k3.x + k1.x)/2 + 20,(k3.y + k1.y)/2 - 20,k3.x,k3.y)
// ctx.lineTo(k3.x,k3.y);
ctx.lineTo(k4.x,k4.y);
ctx.quadraticCurveTo((k4.x + k2.x)/2 - 20,(k4.y + k2.y)/2 + 20,k2.x,k2.y)
}else{
ctx.moveTo(k1.x,k1.y);
ctx.lineTo(k2.x,k2.y);
ctx.quadraticCurveTo((k4.x + k2.x)/2 - 20,(k4.y + k2.y)/2 - 20,k4.x,k4.y)
// ctx.lineTo(k4.x,k4.y);
ctx.lineTo(k3.x,k3.y);
ctx.quadraticCurveTo((k1.x + k3.x)/2 + 20,(k1.y + k3.y)/2 + 20,k1.x,k1.y)
}
ctx.fill();
// ctx.closePath();
};
canvas.onmouseup = function(){
}
</script>
</html>