效果概览

支持圆形，矩形，旋转矩形绘制，鼠标像素拾取，图片缩放，图片拖拽，像素测量，roi交集并集补集输出
TODO：实现自由路径绘制，与后台交互数据

实现原理

交集并集差集使用像素做运算，使用0代表没有像素，1代表有像素，然后再做运算

    // 计算交集
    calculateIntersection(shape1, shape2) {
        return shape1.map((pixel, index) => pixel && shape2[index] ? 1 : 0);
    }

    // 计算并集
    calculateUnion(shape1, shape2) {
        return shape1.map((pixel, index) => pixel || shape2[index] ? 1 : 0);
    }

    // 计算差集
    calculateDifference(shape1, shape2) {
        return shape1.map((pixel, index) => pixel && !shape2[index] ? 1 : 0);
    }

canvas事件实现

使用两个canvas，使用隐藏的OffscreenCanvas来判断鼠标命中的是哪个元素，需要把shape同时画到两个canvas中，获取隐藏