<template>
    <canvas width="1800" height="800" style="border: 1px solid blue;background-color: white;" ref="canvasId"></canvas><br>
    线宽: <input type="range" id="range">
    颜色: <input type="color" id="color">
    <button id="btn">清空</button>
</template>

<script setup>
    import {ref, onMounted } from 'vue'

    let canvasId = ref(null);
    let can = canvasId.value;
    let ctx = can.getContext('2d');
    let mouse = { x: 0, y: 0 };
    let last_mouse = { x: 0, y: 0 };

    function changes() {
        can.onmousedown = function (el) {
            mouse.x = el.offsetX;
            mouse.y = el.offsetY;
            can.onmousemove = function (e) {
                last_mouse.x = mouse.x;
                last_mouse.y = mouse.y;
                mouse.x = e.pageX - this.offsetLeft;
                mouse.y = e.pageY - this.offsetTop;
                line();
            }
        }
        can.onmouseup = function () {
            can.onmousemove = null;
        }
    }
    changes();

    range.onchange = function () {
        if (range.value == 0) {
            ctx.lineWidth = 1.0;
        } else {
            ctx.lineWidth = range.value/2;
        }
    }

    function line() {
        let sum = Math.pow(last_mouse.x-900, 2)+ Math.pow(800-last_mouse.y, 2);
        if(sum > Math.pow(600,2) || sum < Math.pow(100,2)){
            return
        }
        ctx.beginPath();
        ctx.lineWidth = range.value/2;
        ctx.strokeStyle = calcColor();
        ctx.lineJoin = 'round';
        // ctx.lineCap='square';
        // moveTo起点
        ctx.moveTo(last_mouse.x, last_mouse.y);;
        // lineTo终点
        ctx.lineTo(mouse.x, mouse.y);
        /*        let currentSum = Math.pow(last_mouse.x-900, 2)+ Math.pow(800-last_mouse.y, 2);
                ctx.moveTo(last_mouse.x, last_mouse.y);
                ctx.arcTo(last_mouse.x, last_mouse.y, mouse.x, mouse.y, Math.sqrt(currentSum));*/
        ctx.closePath();
        ctx.stroke();
    }

    btn.onclick = function(){
        ctx.clearRect(0,0,1800,800);
        arc(100)
        arc(200)
        arc(300)
        arc(400)
        arc(500)
        arc(600)
    }

    function calcColor(){
        let sum = Math.pow(last_mouse.x-900, 2)+ Math.pow(800-last_mouse.y, 2);
        if(sum < Math.pow(200,2) && sum > Math.pow(100,2)){
            return '#AADD11'
        }else if(sum < Math.pow(300,2) && sum > Math.pow(200,2)){
            return '#f82ff5'
        }else if(sum < Math.pow(400,2) && sum > Math.pow(300,2)){
            return '#29f507'
        }else if(sum < Math.pow(500,2) && sum > Math.pow(400,2)){
            return '#fdca19'
        }else{
            return '#0000FF'
        }
    }

    arc(100)
    arc(200)
    arc(300)
    arc(400)
    arc(500)
    arc(600)

    function arc(num){
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(900, 800, num, 0,  Math.PI, true);
        ctx.stroke();
    }

    arcTo();
    function arcTo(){
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(70,20);
        ctx.arcTo(120,20,120,70,50);
        ctx.stroke();
    }

    onMounted(() => {

    })
</script>


<script>
    export default {
        name: "paint"
    }
</script>

<style scoped>

</style>