JavaScript画布-在甜甜圈描边的中心绘制单个图像

Question

我创建一个基于拆分甜甜圈元素的马戏团菜单。 我需要在每个这些元素中显示单个图像，该图像居中并针对给定菜单元素旋转。 一个显示最终效果的示例：

我准备了一个代码，使您可以创建菜单项。 为了正确操作，您必须在一个完整的窗口中运行它。 不幸的是，我无法创建将为每个元素创建图像的代码。我只能使用该模式产生类似的效果，但是这种效果并不令人满意，因为使用“重复”效果看起来很糟糕，甚至没有它也会变得更糟。

提前感谢您的帮助！

function drawdountChart(E) {
    var canvas = $("#menu")[0];
    var chart = canvas.getContext("2d");
    chart.clearRect(0, 0, 500, 500);
    this.x, this.y, this.radius, this.lineWidth, this.strockStyle, this.from, this.to = null;
    this.set = function(x, y, radius, from, to, lineWidth, strockStyle) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.from = from;
        this.to = to;
        this.lineWidth = lineWidth;
        this.strockStyle = strockStyle;
    }

    this.elements = function(elements) {
        this.elements = elements;
    }

    if (E === false) {
        mx = 250;
        my = 250;
    } else {
        mx = E.pageX - $('#menu').offset().left;
        my = E.pageY - $('#menu').offset().top;
    }

    var mangle = (-Math.atan2(mx - 250, my - 250) + Math.PI * 2.5) % (Math.PI * 2);
    var mradius = Math.sqrt(Math.pow(mx - 250, 2) + Math.pow(my - 250, 2));
    var offset = $('#menu').offset();
    var center_x = (offset.left) + ($('#menu').width() / 2);
    var center_y = (offset.top) + ($('#menu').height() / 2);
    var radians = Math.atan2(E.pageX - center_x, E.pageY - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 180;

    this.draw = function(count) {
        chart.beginPath();
        chart.lineWidth = this.lineWidth;
        chart.strokeStyle = this.strockStyle;
        chart.arc(this.x, this.y, this.radius, this.from, this.to);
        var df = 0;
        var isFounded = false;
        for (var i = 0; i < count; i++) {
            if (((mangle > df && mangle < (df + Math.PI / (count / 2))) || (mangle > Math.PI * 15 / count && i == 0))) {
                chart.strokeStyle = "rgba(0, 131, 255, 0.6)";
                $('.description').html(this.elements[i].name)
                isFounded = true;
            } else {
                chart.strokeStyle = "rgba(0, 131, 255, 0.35)";
            }

            if (!isFounded) {
                $('.description').html(null)
            }

            chart.beginPath();
            chart.shadowColor = '#000000';
            chart.shadowBlur = 2;
            chart.shadowOffsetX = 3;
            chart.shadowOffsetY = 3;
            chart.arc(this.x, this.y, this.radius, df, df + (Math.PI * 2) * ((100 / count) / 100) - 0.05);
            img = new Image();
            chart.stroke();
            df += (Math.PI * 2) * ((100 / count) / 100);
        }

        chart.fillStyle = "rgba(0, 131, 255, 0.5)";
        chart.beginPath();
        chart.arc(250, 250, 100, 0, 2 * Math.PI, false);
        chart.fill();
    }
}

function update(event) {
    var elements = [{
        name: 'Simple Text Bla Bla',
        image: '/path/to/img.png'
    }, {
        name: 'Simple Text Bla Bla2',
        image: '/path/to/img.png'
    }, {
        name: 'Simple Text Bla Bla3',
        image: '/path/to/img.png'
    }, {
        name: 'Simple Text Bla Bla4',
        image: '/path/to/img.png'
    }, {
        name: 'Simple Text Bla Bla5',
        image: '/path/to/img.png'
    }];
    var drawDount = new drawdountChart(event);
    drawDount.set(250, 250, 175, 0, Math.PI * 2, 85, "#fff");;
    drawDount.elements(elements);
    drawDount.draw(5)
}

update(false);

body, html{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

#menu, .description, .circlus-bg {
  position: absolute;
  left:0; right:0;
  top:0; bottom:0;
  margin:auto;
  max-width:100%;
  max-height:100%;
  overflow:auto;

}

#menu {
  z-index: 1;
}

.circlus-bg, .description {
  z-index: 2;
}

.description {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  color: #fff;
  opacity: 0.8;
  text-shadow: 2px 2px #000;
  width: 180px;
  display: table;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
   <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300" rel="stylesheet">
</head>
<body onmousemove="update(event);">
    <canvas id='menu' width='500' height='500'></canvas>
    <div class="description">

  </div></script>
  <script src="js/main.js" charset="utf-8"></script>
</body>
</html>