canvas图片旋转后下落该如何实现

Question

问题描述

canvas里的图片旋转角度下落的效果，自己折腾了半天，还是有些异常，
旋转后速度异常，正常应该都是一个速度的，估计和我(this.x + Math.tan(deg) * this.y)这句代码有关，加这句是为了旋转后仍为直线下落；
生成的时候的高度不对，正常应该都在顶端生成，可有些会在其他高度生成

这两个问题把旋转相关的代码去掉后是好的，麻烦各位大佬帮忙指点下
在线demo

关键代码

    var deg=this.roate * Math.PI / 180

    context.save();
    // context.translate(($el.widths) / 2, ($el.heights) / 2);

    context.rotate(deg);

    context.drawImage(
        $el.image,
        0, 0, //绘制在Canvas画布上起始横坐标。
        $el.widths, //表示图片元素从坐标点开始算，多大的宽度内容绘制Canvas画布上。
        $el.heights,
        (this.x + Math.tan(deg) * this.y), this.y,
        // (this.x), this.y,
        $el.widths * this.radio, $el.heights * this.radio
    );
    context.restore();
//this.x是随机生产的x坐标，this.y初始值为0，在其他地方有加值，$el.widths,heights是图片的宽高，this.radio是缩放系数

又细看了一遍canvas 实现一张图片 旋转下落,效果改出来了

    context.save();
    
    context.translate(this.x+($el.widths) / 2, this.y+($el.heights) / 2);
    context.rotate(deg);
    context.translate(-this.x-($el.widths) / 2, -this.y-($el.heights) / 2);
    
    context.drawImage(
        $el.image,
        0, 0,
        $el.widths,
        $el.heights,
        (this.x), this.y,
        $el.widths * this.radio, $el.heights * this.radio
    );
    context.restore();

还是希望又大神讲解下坐标系移到图片中心再旋转再平移回去的意思，谢谢