Question

我试图在画布上绘制多个圆圈，其中每个圆圈都以数组元素为中心。我想把它们安排在轮状结构中。之后，我会添加到他们的线路链接。我研究过＆amp;发现了类似的问题，但即使遵循它们，我也无法在画布上绘制它们，我不确定我做错了什么。有人能帮帮我吗？以下是整个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>

Answer 1

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

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

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

查看代码here。

使用javascript绘制带有数组元素的多个圆圈作为文本居中的文本

1 个答案: