Question

所以我在画布上画了一个圆圈，我试图在其中加入一行文字。问题是，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();

            }

Answer 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>

没有坐标的filltext

1 个答案: