- function Rect(x,y,width,height) {
- this.x = x;
- this.y = y;
- this.width = width;
- this.height = height;
- }
- Rect.prototype.draw = function(context){
- context.save();
- context.translate(this.x,this.y);
- context.fillRect(0,0,this.width,this.height);
- context.restore();
- }
2, 获取鼠标位置
因为 B 需要跟随鼠标移动所以我们需要检测鼠标在画布的当前位置. 创建 Capturemouse 函数检测鼠标在传入的文档节点 (element) 上的移动并返回一个 mouse 对象(其中包含了鼠标的 x,y 坐标).
代码如下:
- function Capturemouse (element) {
- var mouse={x:null,y:null};
- element.addEventListener('mousemove',function (event) {
- var x, y;
- if(event.pageX || event.pageY){
- x = event.pageX;
- y = event.pageY;
- }else{
- x = event.clientX+document.body.scrollLeft+
- document.documentElement.scrollLeft;
- y = event.clientY+document.body.scrollTop+
- document.documentElement.scrollTop;
- }
- x -=element.offsetLeft;
- y -=element.offsetTop;
- mouse.x = x;
- mouse.y = y;
- },false);
- return mouse;
}
3, 碰撞检测
检测 A,B 是否发生重叠, 在讨论是否发生重叠时我们可以先看看没有重叠的四种情况, 如下图:
以下是对这四种状态的判断:
- (adsbygoogle = Windows.adsbygoogle || []).push({
- });
- ,rectB.y+rectB.height <rectA.y
- ,rectB.y> rectA.x +rectA.width
- ,rectB.y> rectA.y + rectA.height
,rectB.x+rectB.width <rectA.x
知道如何判断没有重叠的状态, 那发生重叠的状态该如何判断呢? 没错 "取反"!, 我们创建函数 Interaect 并添加到 Init.JS 中, 该函数传入两个 Rect 对象参数, 当两 Rect 对象发生重叠将返回 true.
代码如下:
- function Intersect(rectA,rectB) {
- return !(rectB.y+rectB.height < rectA.y || rectB.y> rectA.x +rectA.width ||
- rectB.y> rectA.y + rectA.height|| rectB.x+rectB.width < rectA.x)
}
4, 动画循环
新建 animationjs, 设置 requestAnimationFrame()动画函数.
在循环体中将做以下两件事:
"清空" 当前 canvas 中内容, 为绘制下一帧做准备.
检测 A,B 是否发生重叠, 若重叠则在控制台输出 interact!!!
检测当前鼠标在 canvas 上的移动并将鼠标位置更新到 B 的位置属性中.
根据新的位置属性重新绘制 A,B(当然, A 的位置不会更新但因为每次循环将清空 canvas 所以需要重新绘制)
代码如下:
- function drawAnimation() {
- Windows.requestAnimationFrame(drawAnimation);
- context.clearRect(0, 0, canvas.width, canvas.height);
- if(Intersect(rectA,rectB)){
- console.log('interact!!!!');
- }
- if(mouse.x){
- rectB.x = mouse.x;
- rectB.y = mouse.y;
- }
- rectA.draw(context);
- rectB.draw(context);
}
3, 初始化
新建 Init.JS , 获取 canvas 元素并绑定鼠标移动检测, 初始化 Rect 对象 A 和 B, 最后开启动画循环.
代码如下:
- Windows.onload = function () {
- canvas = document.getElementById('collCanvas');
- context = canvas.getContext('2d');
- Capturemouse(canvas);
- rectA = new Rect(canvas.width/2,canvas.height/2,100,100);
- rectB = new Rect(100,100,100,100);
- drawAnimation();
}
来源: https://juejin.im/post/5bf76ddbe51d45323d6391c1