81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
|
var circle = {x: 50, y: 50, radius: 50, contour: []};
|
||
|
|
|
||
|
|
var box = {x: 20, y: 20, width: 300, height: 300};
|
||
|
|
|
||
|
|
for(var a = 0; a < Math.PI * 2; a += Math.PI / circle.radius){
|
||
|
|
circle.contour.push({
|
||
|
|
_x: Math.sin(a) * circle.radius, _y: Math.cos(a) * circle.radius
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var canvas = document.body.appendChild(document.createElement("canvas")).getContext("2d");
|
||
|
|
canvas.canvas.width = 400;
|
||
|
|
canvas.canvas.height = 400;
|
||
|
|
|
||
|
|
var loop = function(){
|
||
|
|
canvas.canvas.width = canvas.canvas.width;
|
||
|
|
canvas.save();
|
||
|
|
canvas.fillRect(box.x, box.y, box.width, box.height);
|
||
|
|
canvas.globalCompositeOperation = "destination-out";
|
||
|
|
canvas.fillRect(box.x + 20, box.y + 20, box.width - 40, box.height - 40);
|
||
|
|
canvas.restore();
|
||
|
|
|
||
|
|
var circleCanvas = document.createElement("canvas").getContext("2d");
|
||
|
|
circleCanvas.canvas.width = canvas.canvas.width;
|
||
|
|
circleCanvas.canvas.height = canvas.canvas.height;
|
||
|
|
|
||
|
|
circleCanvas.save();
|
||
|
|
circleCanvas.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
|
||
|
|
circleCanvas.fillStyle = "#aaa";
|
||
|
|
circleCanvas.fill();
|
||
|
|
circleCanvas.globalCompositeOperation = "destination-in";
|
||
|
|
circleCanvas.fillRect(box.x + 20, box.y + 20, box.width - 40, box.height - 40);
|
||
|
|
circleCanvas.restore();
|
||
|
|
canvas.drawImage(circleCanvas.canvas, 0, 0);
|
||
|
|
|
||
|
|
if(circle._x < box.x + 20){
|
||
|
|
circle._x = box.x + 20;
|
||
|
|
}
|
||
|
|
if(circle._y < box.y + 20){
|
||
|
|
circle._y = box.y + 20;
|
||
|
|
}
|
||
|
|
if(circle._x > box.x + box.width - 20){
|
||
|
|
circle._x = box.x + box.width - 20;
|
||
|
|
}
|
||
|
|
if(circle._y > box.y + box.height - 20){
|
||
|
|
circle._y = box.y + box.height - 20;
|
||
|
|
}
|
||
|
|
|
||
|
|
circle.contour.forEach(function(p){
|
||
|
|
p.x = p._x;
|
||
|
|
p.y = p._y;
|
||
|
|
|
||
|
|
if(circle.x + p.x < box.x + 20){
|
||
|
|
p.x = box.x + 20 - circle.x;
|
||
|
|
}
|
||
|
|
if(circle.y + p.y < box.y + 20){
|
||
|
|
p.y = box.y + 20 - circle.y;
|
||
|
|
}
|
||
|
|
if(circle.x + p.x > box.x + box.width - 20){
|
||
|
|
p.x = box.x + box.width - 20 - circle.x;
|
||
|
|
}
|
||
|
|
if(circle.y + p.y > box.y + box.height - 20){
|
||
|
|
p.y = box.y + box.height - 20 - circle.y;
|
||
|
|
}
|
||
|
|
canvas.strokeStyle = "green";
|
||
|
|
canvas.lineWidth = 3;
|
||
|
|
canvas.lineTo(p.x + circle.x, p.y + circle.y);
|
||
|
|
});
|
||
|
|
canvas.stroke();
|
||
|
|
|
||
|
|
circle.x = circle._x;
|
||
|
|
circle.y = circle._y;
|
||
|
|
requestAnimationFrame(loop);
|
||
|
|
};
|
||
|
|
loop();
|
||
|
|
|
||
|
|
document.onmousemove = function(event){
|
||
|
|
circle._x = event.layerX;
|
||
|
|
circle._y = event.layerY;
|
||
|
|
};
|