2016-04-19 11 views
0

キャンバス内のテキストは、スクリプトを使用してテキストを表示していません。 ctx.fillTextを使用している場合は何も表示されません。 このコードは正しく機能しませんでした。 以下のコードでこれらの行をコメントすると、コードの動作のみが行われます。キャンバスの中心にある円キャンバス内のテキスト

//ctx.font(30px Arial); 
//ctx.fillText(Hello World,10,5); 

PLZチェックと答え、

<html> 
<head> 
    <style> 
     canvas: { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-left: -250px; 
      margin-top: -100px; 
      border: 2px solid red; 
     } 
    </style> 
</head> 
<body> 
<canvas height="300" width="500" id="canvas"></canvas> 

    <script> 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 

     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 100; 
     ctx.beginPath(); ctx.arc(centerX,centerY,radius,0,2*Math.PI,false); 
     ctx.font(30px Arial); 
     ctx.fillText(Hello World,10,5); 
     ctx.fillStyle='teal'; 
     ctx.fill(); 
    </script> 
</body> 
</html> 
+1

コンソールを開く(F12を押す)。構文エラーがいくつかあります。 –

答えて

2
ctx.fillText("Hello World",10,5); 

あなたは引用符を逃しました。引用符を付けないと、それは変数/オブジェクトへの歓迎です。基本的なプログラミングスキル...

+1

それに加えて: 'ctx.font()'も間違って使われています、 'ctx.font =" 30px arial ";' – K3N

+0

あなたは正しいです。私はその行を逃した。 –

関連する問題