使用javascript绘制多个以数组元素为文本中心的圆

draw multiple circles with array elements as text centered in them using javascript

本文关键字：文本 数组元素 绘制 javascript 使用      更新时间：2023-09-26

我试图在画布上画多个圆圈，每个圆圈中都有数组元素&希望将它们排列成类似轮子的结构。稍后，我将向它们添加行链接。我研究了&发现了类似的问题，但即使遵循了这些问题，我也无法在画布上画出来，我也不确定自己做错了什么。有人能帮帮我吗？以下是整个HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body >
    <canvas id="mindMap" width="500" height="500" style="border:1px solid red">
            <p>Your browser doesn't support canvas.</p>
        </canvas>

</body>
</html>
<script type ="text/javascript">
var texts = [Pizza, Crust, Thick, Measurements, Size];
    var canvas = document.getElementById('mindMap');
    var ctx = canvas.getContext('2d');
    var w = canvas.width/2;
    var h = canvas.height/2;
    var r = 20;
    //Draw user-entered words on canvas
    for (var i = 0; i < texts.length; ++i) {
        ctx.fillStyle = '#C0B7EE';  
        ctx.arc(w, h, r, 0, 2*Math.PI);
        ctx.fill();
        ctx = canvas.getContext('2d');
        ctx.fillStyle = 'black';
        ctx.font = '12px Arial';
        ct.textAlign = 'center';
        ctx.fillText(texts[i], w, h+3);
        w -= 50;
        h -= 50;    
    }
</script>

您的texts数组可能应该填充字符串：

 var texts = ['Pizza', 'Crust', 'Thick', 'Measurements', 'Size'];

此外，在绘制圆之前需要添加ctx.beginPath()，并且在ctx.textAlign旁边有一个类型。

看看这里的代码。

相关文章：