Html 不带坐标的填充文本_Html_Canvas_Draw

Html 不带坐标的填充文本

html canvas

Html 不带坐标的填充文本,html,canvas,draw,Html,Canvas,Draw,所以我在画布上画了一个圆圈，我想在里面画一行文字。问题是，filltext代码行在特定的给定坐标下生成文本，但我不希望这样有没有办法让这行文字留在圆圈内 var programFill = function ( context ) { context.beginPath(); context.arc( 0, 0, 1, 0, PI2, true ); context.font=

所以我在画布上画了一个圆圈，我想在里面画一行文字。问题是，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();

            }

在圆圈内绘制填充文本

下面是一个如何将文本放入圆中的示例：

注意，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>


正文{背景色：象牙色；填充：10px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas1=document.getElementById（“canvas”）；
var context=canvas1.getContext（“2d”）；
context.beginPath（）；
context.fillStyle=“黄色”；
context.strokeStyle=“black”；
context.font=“20px格鲁吉亚”；
上下文。线宽=10；
arc（100100,75,0,2*Math.PI，false）；
context.fill（）；
context.beginPath（）；
context.fillStyle=“红色”；
fillText（“你好，世界！”，40100）；
context.fill（）；
}); // end$（函数（）{}）；