canvas实现箭头拖拽移动，放大缩小，旋转功能

功能如下：

 代码：

 var config = {
        maxScale: 4.0, // 最大放大倍数
        minScale: 0.1, // 最小放大倍数
        step: 0.1 // 每次放大、缩小 倍数的变化值
    }
    var arrow = function () {
        this.x = 0;
        this.y = 0;
        this.color = "#f90"
        this.rolation = 0;
        this.scale = 1.0
    }
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext('2d');
    arrow.prototype.draw = function (ctx) {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.scale(this.scale, this.scale)
        ctx.rotate(this.rolation)
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.moveTo(0, 15);
        ctx.lineTo(-50, 15);
        ctx.lineTo(-50, -15);
        ctx.lineTo(0, -15);
        ctx.lineTo(0, -35);
        ctx.lineTo(50, 0);
        ctx.lineTo(0, 35);
        ctx.closePath()
        ctx.fill();
        ctx.restore();
    }
    var Arrow = new arrow();
    Arrow.x = canvas.width / 2;
    Arrow.y = canvas.height / 2;

    var c_x, c_y; //相对于canvas坐标的位置；
    var isMouseDown = false;
    var isMouseMove = false
    Arrow.draw(ctx)

    canvas.oncontextmenu = function (e) {
        e.preventDefault();
        // 执行代码块
    }
    canvas.onmousewheel = function (e) {
        if (e.wheelDelta > 0) {
            Arrow.scale = (Arrow.scale >= config.maxScale) ? config.maxScale : Arrow.scale + config
                .step;
        } else {
            Arrow.scale = (Arrow.scale <= config.minScale) ? config.minScale : Arrow.scale - config
                .step;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        requestAnimationFrame(drawFram)
    }
    canvas.addEventListener('mousedown', function (e) {
        switch (e.button) {
            case 0:
                isMouseDown = true;
                break;
            case 2:
                isMouseMove = true;
                break;

            default:
                break;
        }

    }, false)

    canvas.addEventListener('mousemove', function (e) {
        if (isMouseDown == true) {
            c_x = getPos(e).x - canvas.offsetLeft;
            c_y = getPos(e).y - canvas.offsetTop;
            Arrow.x = c_x
            Arrow.y = c_y
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            requestAnimationFrame(drawFram)
        }
        if (isMouseMove == true) {
            c_x = getPos(e).x - canvas.offsetLeft;
            c_y = getPos(e).y - canvas.offsetTop;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            //setInterval(drawFram,1000/60)
            requestAnimationFrame(drawFram)

        }
    }, false)


    canvas.addEventListener('mouseup', function (e) {
        isMouseDown = false;
        isMouseMove = false
    }, false)

    function drawFram() {
        var dx = c_x - Arrow.x;
        var dy = c_y - Arrow.y;
        Arrow.rolation = Math.atan2(dy, dx);
        console.log(Arrow.rolation)
       
        Arrow.draw(ctx)
    }

    function getPos(e) {
        var mouse = {
            x: 0,
            y: 0
        }
        var e = e || event;
        var x, y;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else {
            x = e.pageX + document.body.scrollLeft + document.document.documentElement.scrollLeft;
            y = e.pageY + document.body.scrollTop + document.document.documentElement.scrollTop;
        }
        mouse.x = x;
        mouse.y = y;
        return mouse;
    }