@writ/utils/canvas-spin-sunflower.js

My tool kit

import int2positive from './int-to-positive';
import arrayGenerator from './array-generate';
export { sunflower as default };

/** 
 * @param {HTMLCanvasElement} cvs 
 * @param {Object} opt 
 * @param {number} opt.block 花瓣的个数
 * @param {number} opt.height 花瓣的高度
 * @param {number} opt.width 花瓣的宽度
 * @param {number} opt.time 转动延迟时间
 * @param {number} opt.init 初始角度
 * @param {number} opt.diff 花瓣根部到圆心的距离
 * @param {number} opt.rgb 花瓣颜色
 * @param {number} opt.bgColor 背景色
 */
function sunflower(cvs, opt) {
    opt = opt || {};
    var block = int2positive(opt.block, 6);
    var height = int2positive(opt.height, 4);
    var width = int2positive(opt.width, 2);
    var time = int2positive(opt.time, 100);
    var radius = int2positive(opt.init, 2);
    var diff = int2positive(opt.diff, 2);
    var rgb = typeof opt.rgb === 'string' ? opt.rgb : '0,123,255';
    var bgColor = typeof opt.bgColor === 'string' ? opt.bgColor : 'transparent';
    var ctx = cvs.getContext("2d");

    var dx = height * 6;
    var dy = height * 6;

    var ox = dx / 2;
    var oy = dy / 2;

    var ry1 = dx / 2 - height * 2;
    var ry2 = dx / 2 - height - diff;
    var rx2 = width / 2;
    var style = arrayGenerator(block, i => 'rgba(' + rgb + ',' + + (i / block) + ')');

    var stop, timer;
    var start = function (radius) {
        if (stop) return;
        ctx.fillStyle = bgColor;
        ctx.rotate(Math.PI * 2 / block);
        for (var i = 1; i <= block; i++) {
            ctx.rotate(Math.PI * 2 / block);
            ctx.beginPath();
            ctx.fillStyle = style[i]
            ctx.arc(0, ry1, rx2, 0, Math.PI, true);
            ctx.arc(0, ry2, rx2, Math.PI, 0, true);
            ctx.closePath();
            ctx.fill();
        }

        timer = setTimeout(function () {
            ctx.clearRect(-ox, -oy, dx, dy);
            radius >= block ? radius = 1 : radius += 1;
            start(radius);
        }, time);
    }

    cvs.height = dy;
    cvs.width = dx;
    ctx.translate(ox, oy);
    start(radius);

    return function () {
        stop = true;
        if (timer) clearTimeout(timer);
    };
}