2016-08-27 3 views
-1

文字列がある場合"Hello World!"などJavaScriptのキャンバスに上記の文字列の上半分のみを描画するにはどうすればよいですか?

thisのように表示したいと思います。JavaScriptの文字列の上半分を描画します

+0

これまでに何を試みましたか? – Li357

+0

1. 'fillRect'は灰色の背景です。2.' fillText'はテキストです。3. 'fillRect'は背景の下半分です(テキストの下半分を上書きします)。 – markE

+0

私がやろうとしているのは、一番下の文字列の半分と上の文字列の上半分です。 – UniquePineapple

答えて

1

.clip()メソッドを使用すると、切り抜く領域の外にあるものを描画するキャンバスのセクションを指定できます。ラ:

<html> 
<body style="background:black;"> 
<canvas id="myCanvas" width="300" height="200"></canvas> 
</body> 
<script> 

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    // Clip a rectangular area 
    ctx.rect(50,20,200,80); 
    //ctx.stroke(); 
    ctx.clip(); 
    // Draw text into clip() 
    ctx.fillStyle="#666666"; 
    ctx.font = "30px Arial"; 
    ctx.fillText("Hello World",60,110); 

</script> 
</html> 

は詳細

幸運のためthis entryを参照してください!

+0

この機能は完璧です。ありがとうございます。 – UniquePineapple

関連する問題