Canvas学习笔记——拖曳与投掷物体

首先用一个例子来演示这个效果：

鼠标可以拖曳和投掷小球

 

// > 16 & 0xff,
g = color >> 8 & 0xff,
b = color >> 0xff,
a = (alpha 1) ? 1 : alpha);

if(a === 1) {
return 'rgb('+r+','+g+','+b+')';
} else {
return 'rgba('+r+','+g+','+b+','+a+')';
}
};

window.utils.parseColor = function (color, toNumber) {
if (toNumber === true) {
if (typeof color === 'number') {
return (color | 0); //chop off decimal
}
if (typeof color === 'string' && color[0] === '#') {
color = color.slice(1);
}
return window.parseInt(color, 16);
} else {
if (typeof color === 'number') {
color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
}
return color;
}
};

window.utils.containsPoint = function (rect, x, y) {
return !(x rect.x + rect.width ||
y rect.y + rect.height);
};

window.utils.intersects = function (rectA, rectB) {
return !(rectA.x + rectA.width 0) {
ctx.stroke();
}
ctx.restore();
};

Ball.prototype.getBounds = function () {
return {
x: this.x - this.radius,
y: this.y - this.radius,
width: this.radius * 2,
height: this.radius * 2
};
};

function Ship () {
this.x = 0;
this.y = 0;
this.width = 25;
this.height = 20;
this.rotation = 0;
this.showFlame = false;
}

Ship.prototype.draw = function (ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);

ctx.lineWidth = 1;
ctx.strokeStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(-10, 10);
ctx.lineTo(-5, 0);
ctx.lineTo(-10, -10);
//ctx.lineTo(10, 0);
ctx.closePath();
ctx.stroke();

if (this.showFlame) {
ctx.beginPath();
ctx.moveTo(-7.5, -5);
ctx.lineTo(-15, 0);
ctx.lineTo(-7.5, 5);
ctx.stroke();
}
ctx.restore();
};

(function() {
var canvas = document.createElement('canvas'),
a = document.getElementById('a');
canvas.id = 'c1';
canvas.width = 500;
canvas.height = 500;

a.appendChild(canvas);

var canvas = document.getElementById('c1'),
ctx = canvas.getContext('2d');

var ball = new Ball(30,Math.random() * 0xffffff),
mouse = utils.captureMouse(canvas),
vx = Math.random() * 5 - 2,
vy = -10,
g = 0.2,
isMouseDown = false,
oldX,oldY,
bounce = -0.8,
left = 0,
top = 0,
dx,dy,
right = canvas.width,
bottom = canvas.height;

ball.x = canvas.width / 2;
ball.y = canvas.height / 2;

canvas.addEventListener('mousedown',function() {
if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)) {
isMouseDown = true;
vx = 0;
vy = 0;
dx = mouse.x - ball.x;
dy = mouse.y - ball.y;
oldX = ball.x;
oldY = ball.y;
canvas.addEventListener('mousemove',onMouseMove,false);
canvas.addEventListener('mouseup',onMouseUp,false);
}
},false);

function onMouseMove() {
ball.x = mouse.x - dx;
ball.y = mouse.y - dy;
}

function trackVelocity() {
vx = ball.x - oldX;
vy = ball.y - oldY;
oldX = ball.x;
oldY = ball.y;
}

function checkBound() {
vy += g;
ball.x += vx;
ball.y += vy;
if(ball.x + ball.radius > right) {
ball.x = right - ball.radius;
vx *= bounce;
} else if(ball.x - ball.radius bottom) {
ball.y = bottom - ball.radius;
vy *= bounce;
} else if(ball.y - ball.radius

拖曳功能比较简单，主要难点在如何计算投掷时的速度。

用一张图来说明：

物体在动画行进一帧的间隔内从a点被鼠标拖动到了b点，很显然在这个过程中物体的运动速度为：

vx = b.x - a.x;
vy = b.y - a.y;

只要在鼠标按下时记录小球的位置，然后在拖动时不断计算小球当前位置与旧位置的距离，就能得到小球的速度：

canvas.addEventListener('mousedown',function() {
    oldX = ball.x;
    oldY = ball.y;

    canvas.addEventListener('mousemove',onMouseMove,false);
    canvas.addEventListener('mouseup',onMouseUp,false);
},false);

function onMouseMove() {
    ball.x = mouse.x;
    ball.y = mouse.y;
}

function onMouseUp() {
           canvas.removeEventListener('mousemove',onMouseMove,false);
    canvas.removeEventListener('mouseup',onMouseUp,false);
}

function trackVelocity() {
            vx = ball.x - oldX;
            vy = ball.y - oldY;
            oldX = ball.x;
            oldY = ball.y;
}

(function() {
            window.requestAnimFrame(arguments.callee,canvas);
            ctx.clearRect(0,0,canvas.width,canvas.height);
            trackVelocity();
            ball.draw(ctx);
})();