默认情况下,HTML 5画布具有矩形形状,尽管如果我在画布下进行任何动画处理,它将移动到矩形区域中。
如果我将区域限制为径向形状怎么办?它绝对不应该超出径向形状。
我们可以将边界限制为径向而不是默认的矩形吗?
您可以看到球超出了径向边界-http://jsfiddle.net/stackmanoz/T4WYH/
我现在以径向形状设计了边界,我也想限制径向区域。
球的极限区域
function bounce() {
if (x + dx > 293 || x + dx < 0) {
dx = -dx;
}
if (y >= 290) {
y = 290;
}
if (y + dy > 290 || y + dy < 0) {
dx *= 0.99;
dy = -dy;
}
if (Math.abs(dx) < 0.01) {
dx = 0;
}
dy++;
}
最佳答案
圆的笛卡尔公式为(x − a)2 +(y − b)2 = r2
因此,请在您的弹跳状态下检查一下:
function bounce() {
if( Math.pow(x - 150, 2) + Math.pow(y - 150, 2) > Math.pow(150, 2))
{
dx = -dx * (0.6 + (Math.random() * 0.8));
dy = -dy * (0.6 + (Math.random() * 0.8));
}
}
我使用随机跳动是因为我无法使用入射速度和弹跳点的法线来计算出正确的弹跳角(我敢肯定有人可以这么做)
在这里更新小提琴:http://jsfiddle.net/T4WYH/1/