Question

我想在另一个圆圈内绘制一个圆圈，然后在新的（小）圆圈内添加文字（例如字母表）。

到目前为止，我得到了以下内容，有什么建议吗？

            <!DOCTYPE html>
            <html>
            <body>

            <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
            Your browser does not support the HTML5 canvas tag.</canvas>

            <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(95,50,40,0,2*Math.PI);
            ctx.stroke();
            ctx.fillStyle ="red";
            ctx.fill();

            var dd = document.getElementById("myCanvas");
            var ddtx = dd.getContext("2d");
            ddtx.beginPath();
            ddtx.arc (96,50,35,2*Math.PI,1.99*Math.PI);
            ddtx.stroke();
            ddtx.fillStyle ="blue";
            ddtx.fill();

            var d = document.getElementById("myCanvas");
            var dtx = d.getContext("2d");
            dtx.beginPath();
            dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
            dtx.stroke();
            dtx.fillStyle = "white";
            dtx.fill(); 
            </script> 

            </body>
            </html>

Answer 1

您可以按如下方式使用上下文文本功能：

new_anno =("""do something with i""" for i in anno if #some condition)

     var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(95,50,40,0,2*Math.PI);
            ctx.stroke();
            ctx.fillStyle ="red";
            ctx.fill();

            var d = document.getElementById("myCanvas");
            var dtx = d.getContext("2d");
            dtx.beginPath();
            dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
            dtx.stroke();
            dtx.fillStyle = "white";
            dtx.fill(); 


            dtx.fillStyle = "black"; // font color to write the text with
            var font = "bold 13px serif";
            dtx.font = font; // specify the font
            dtx.textBaseline = "top"; // set the baseline as top
            dtx.fillText("A", 90 ,43); // render the text with its x and y coordinates

使用画布在嵌套圆圈中添加文本？

1 个答案: