canvas内容移动与交互

1. canvas里的内容绘制上去之后，无法直接进行控制。
2. 创建一个用来维护canvas中内容的对象
3. canvas每次绘制都是从可维护的内容对象中取值，进行绘制的。

        class Circle {
            constructor(id, x, y, r) {
                this.id = id
                this.x = x
                this.y = y
                this.r = r
                this.startAngle = 0
                this.endAngle = Math.PI * 2
                this.anticlockwise = true,
                    this.color = randomHexColor()
            }
        }

        //画布中的形状，用来维护canvas里面的内容
        let geoBox = []

        //当前选中形状
        let currentGeo = null

        //随机颜色
        function randomHexColor() { //随机生成十六进制颜色
            var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
            while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
                hex = '0' + hex;
            }
            return '#' + hex; //返回‘#'开头16进制颜色
        }

        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
		
		//每一次重绘都是从geoBox这个对象里面取值
        function drawShap() {
            geoBox.forEach(e => {
                ctx.beginPath();
                ctx.arc(e.x, e.y, e.r, e.startAngle, e.endAngle, e.anticlockwise);
                ctx.fillStyle = e.color;
                ctx.fill();
                ctx.stroke();
            })
        }
        canvas.addEventListener('mousedown', e => {
            console.log(e);
            console.log(e.offsetX, e.offsetY); //鼠标点的位置
            geoBox.forEach(item => {
                let lineSegment = Math.sqrt(Math.pow(e.offsetX - item.x, 2) + Math.pow(e.offsetY - item
                    .y, 2))
                console.log(lineSegment);
                if (lineSegment <= item.r) {
                    currentGeo = item
                    console.log(currentGeo);
                }
            })
        })
        canvas.addEventListener('mousemove', e => {
            if (currentGeo == null) {
                return
            } else {
                console.log(e);
                console.log(e.offsetX, e.offsetY); //鼠标点的位置
                // currentGeo = new Circle(parseInt(Math.random() * 100000), e.offsetX, e.offsetY, 10)
                currentGeo.x = e.offsetX
                currentGeo.y = e.offsetY
                ctx.clearRect(0, 0, 500, 500);
                drawShap()
                console.log(geoBox);
            }

        })
        canvas.addEventListener('mouseup', e => {
            currentGeo = null
        })