Intersections

by kadymov

CSS

body {
    margin-top: 50px;
}

JavaScript

function createCanvas (widtn, height, container) {
    canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = widtn;
    canvas.height = height;

    if (typeof container !== 'undefined') {
        container.appendChild(canvas);
    }
    return {
        el     : canvas,
        ctx    : ctx
    };
}

/* Тут просто, нам необходим радиус и центр окружности,
 * а также координаты проверяемой точки (курсора */
function checkСircle(circle, x, y) {
    // Определим расстояние от центра окружности до точки
    var dx = circle.x - x,  // Найдем разность векторов
        dy = circle.y - y,  // и получим вектор от центра к точке
        len = Math.sqrt(dx*dx + dy*dy); // Надем длинну вектора

    // Если длинна меньше радиуса - точка над окружносью
    return circle.r > len;
}

/* Тут все просто, нам надо найти границы прямоугольника и
 * проверить пренадлежат ли координаты мыши этим промежуткам */
function checkRect(rect, x, y) {
    var top = rect.y,
        left = rect.x,
        bottom = top + rect.height,
        right = left + rect.width;
    
    return x >= left && x <= right && y >= top && y <= bottom;
}

/*****************************************************************************************/

function drawCircle(ctx, x, y) {
    var isSel = checkСircle(circle, x, y);
    
    if (isSel) {
        ctx.strokeStyle = 'red';        
    } else {
        ctx.strokeStyle = 'black';  
    }
    
    ctx.beginPath();
    ctx.clearRect (0, 0, 200, 150);
    ctx.arc(circle.x-0.5, circle.y-0.5, circle.r, 0,2*Math.PI);
    ctx.stroke();
}


function drawRect(ctx, x, y) {
    var isSel = checkRect(rect, x, y);
    
    if (isSel) {
        ctx.strokeStyle = 'red';        
    } else {
        ctx.strokeStyle = 'black';  
    }
    
    ctx.strokeRect(rect.x-0.5, rect.y-0.5, rect.width, rect.height);
}
/*****************************************************************************************/

var canvas = createCanvas(200, 150,...