canvas上画闭合折线图

支持在canvas上画多个闭合折线图，isPointInPath可以判断当前点击的位置是否在折线图中

h5, canvas, polygon

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1374
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    rubberBandRect = {},
    pointerDownLocation = {},
    pointerArray = [],
    circleWidth = 5,
    _current_mask_point = [],
    currentPoint = {};

var imgData = null,
    dragging = false;

function saveData() {
    imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function restoreData() {
    ctx.putImageData(imgData, 0, 0);
}

function clearCanvas() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function unifyCoordinates(x, y) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: Math.floor((x - rect.left) * (canvas.width / rect.width)) + 0.5,
        y: Math.floor((y - rect.top) * (canvas.height / rect.height)) + 0.5
    };

}

function drawShape(location) {

ctx.beginPath();
    ctx.strokeStyle = "red";
    for (var i = 0; i < pointerArray.length; i++) {
        let point = pointerArray[i];
        if (i == 0) {
            ctx.moveTo(point.x, point.y);
        } else {
            ctx.lineTo(point.x, point.y);
        }
    }
    ctx.lineTo(currentPoint.x, currentPoint.y);
    ctx.stroke();
}

function onResize() {
    saveData();
    setCanvasSize();
    restoreData();
}

function onPointerDown(e) {
    var location = unifyCoordinates(e.clientX, e.clientY);
    setPointerArray(location);
    currentPoint = location;
    dragging = true;
    saveData();
}

function setPointerArray(location) {

pointerArray.push(location);
    _current_mask_point = [];
    for (var i = 0; i < pointerArray.length - 1; i++) {
        let point = pointerArray[i];
        if (i >= 3 && Math.abs(point.x - location.x) <= circleWidth && Math.abs(point.y - location.y) <= circleWidth) {
            ctx.closePath();
            pointerArray = [];
            dragging = false;
            saveData();
            return;
        } else {
            _current_mask_point.push(point);
        }
    }

}

function onPointerMove(e) {
    if (dragging) {
        var location = unifyCoordinates(e.clientX, e.clientY);
        currentPoint = location;
        restoreData();
        drawShape(location);
    }
}

function onPointerUp(e) {
    if (!dragging) {
        var location = unifyCoordinates(e.clientX, e.clientY);
        drawShape(location);
    }
}

//多个闭合折线时，判断当前点在哪个闭合折线中
function isPointInPath(point, vs) {
    var x = point[0],
        y = point[1];

var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0],
            yi = vs[i][1];
        var xj = vs[j][0],
            yj = vs[j][1];

var intersect = ((yi > y) != (yj > y)) &&
            (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

return inside;
}
let point = [122.5, 90.5];
let vs = [
    [46.5, 30.5],
    [199.5, 36.5],
    [392.5, 141.5],
    [185, 174],
    [49.5, 141, 5],
    [42.5, 95.5],
    [36.5, 58.5],
    [48.5, 30.5],
    [46.5, 30.5]
];
console.log(isPointInPath(point, vs));
onResize();
window.addEventListener('resize', onResize);
canvas.addEventListener('pointerdown', onPointerDown);
canvas.addEventListener('pointermove', onPointerMove);
canvas.addEventListener('pointerup', onPointerUp);

document.body.appendChild(canvas);

编译

CSS

HTML

支持在canvas上画多个闭合折线图，isPointInPath可以判断当前点击的位置是否在折线图中

h5, canvas, polygon

编辑器支持Emmet

快捷键

支持在canvas上画多个闭合折线图，isPointInPath可以判断当前点击的位置是否在折线图中

h5, canvas, polygon

Canvas各种复合操作效果在线测试: 粒子爆炸混合动画特效

HTML5 Canvas在线把文本或图像转成3D点云动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：