小编rmp*_*tmp的帖子

需要从点创建简单的视线.这条线的长度将适应画布的大小.如果线指向任何对象(圆形,矩形等),则必须在此之后中断.我不知道如何描述这个,但行为应该是这样的.这就像激光瞄准视频游戏.

演示jsfiddle.目标线有红色.我认为该行必须具有动态长度,具体取决于我将指向它的位置.

var canvas = document.querySelector("canvas");
canvas.width = 500;
canvas.height = 300;
var ctx = canvas.getContext("2d"),

line = {
	x1: 190, y1: 170,
    x2: 0, y2: 0,
    x3: 0, y3: 0
};
var length = 100;

var circle = {
	x: 400,
    y: 70
};

window.onmousemove = function(e) {
  //get correct mouse pos
  var rect = ctx.canvas.getBoundingClientRect(),
      x = e.clientX - rect.left,
      y = e.clientY - rect.top;

  // calc line angle
  var dx = x - line.x1, …

我需要检测任何一条线的碰撞圈.我有多边形(x,y)的Verticle数组,并在循环中绘制这个多边形.为了检测我使用算法,计算三角高度.然后我检查这个高度是否<0,然后圆与线相撞.

描述这种方法的图片:

但我有意想不到的结果.我的圆圈与透明线碰撞(什么？).我无法解释它是如何发生的.

在jsfiddle演示:https://jsfiddle.net/f458rdz6/1/

功能,检查碰撞并响应它:

var p = polygonPoints;

for (var i = 0, n = p.length; i < n; i++) {
    var start = i;
    var end = (i + 1) % n;

    var x0 = p[start].x;
    var y0 = p[start].y;
    var x1 = p[end].x;
    var y1 = p[end].y;

    // detection collision
    var dx = x1 - x0;
    var dy = y1 - y0;

    var len = Math.sqrt(dx * dx + dy * dy);
    var dist = …