0

所以我在画布上画了一个圆圈，我试图在里面放一行文字。问题是，filltext 代码行在特定给定坐标处生成文本，但我不希望那样。

有没有办法让文本行留在圆圈内？

        var programFill = function ( context ) {

                context.beginPath();
                context.arc( 0, 0, 1, 0, PI2, true );

                context.font="20px Georgia";
                context.fillText("Hello World!",10,50);

                context.closePath();

                context.fill();

            }
4

1 回答 1

1

在圆圈内绘制填充文本

这是一个如何将文本放在圆圈内的示例：http: //jsfiddle.net/m1erickson/BUkKt/

注意 context.beginPath() 被调用了两次，因为你正在做 2 次填充。第一个绘制填充圆，第二个更改填充颜色并绘制填充文本。

这是代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas1=document.getElementById("canvas");
    var context=canvas1.getContext("2d");

    context.beginPath();
    context.fillStyle="yellow";
    context.strokeStyle="black";
    context.font="20px Georgia";
    context.lineWidth=10;
    context.arc(100,100, 75, 0 , 2 * Math.PI, false);
    context.fill();
    context.beginPath();
    context.fillStyle="red";
    context.fillText("Hello World!",40,100);
    context.fill();

}); // end $(function(){});

</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas><br/>
</body>
</html>
于 2013-03-13T12:53:09.037 回答