キャンバス要素にテキストを描画する

キャンバス上のテキストの問題点を教えてください。大きめにすると文字サイズを変えようとしましたが、小さくすると変わって見えます。テキストにどのような影響があるのかよく分かりません。あなたは上fillTextときに私のコードですキャンバス要素にテキストを描画する

(function(){ 
 
    function init(){ 
 
     var canvas = document.getElementsByTagName('canvas')[0]; 
 
     var c = canvas.getContext('2d'); 
 
     var animationStartTime =0; 
 
     c.fillStyle = 'white'; 
 
     c.font = 'normal 10pt'; 
 
     var textarray = 'you can live a beatiful life with a postive mind'; 
 
     
 
     var j=1; 
 
     //time - next repaint time - HRT 
 
     function draw(time){ 
 
     
 
      c.fillText(textarray.substr(0,j),10,70); 
 
      if(time - animationStartTime > 100){ 
 
       animationStartTime = time; 
 
       j++; 
 
      } 
 
      if(j <= textarray.length){ 
 
      requestAnimationFrame(draw); // 17ms 
 
      } 
 
      } 
 
     function start(){ 
 
      animationStartTime = window.performance.now(); 
 
      requestAnimationFrame(draw); 
 
     } 
 

 
     start(); 
 
    } 
 
//invoke function init once document is fully loaded 
 
    window.addEventListener('load',init,false); 
 
}()); //self invoking function

#canvas{ 
 
    overflow:hidden; 
 
    background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
canvas { 
 
    width:100%; 
 
    height:80vh; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 0; \t 
 
} 
 
\t

<div id="canvas"> 
 
     <div class="row"> 
 
      <div class="col-lg-12 text-center" > 
 
\t \t \t \t \t \t <canvas > 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t </canvas> 
 
      </div> 
 
     </div> \t \t \t 
 
</div>

出典

2017-11-17 Ahmed

を私はフォントプロパティと遊ぶことを試みたが、私は、フォントを小さくするたび結果、ノーと私はここ以下のスニペットのように結果を得ましたそれは手紙ではなく、文字の形をしたピクセルの集まりです。ズームインすると、ピクセルが大きくなります。それがキャンバスの仕組みです。

テキストをベクトルではなくベクトルベースのフォントとして拡大する場合は、キャンバスに描画しないでください。代わりにHTML要素を作成し、CSSの配置を使用してキャンバスの上に配置することができます。こうすれば、レンダリングエンジンは、ズームインするときにフォントをより高い解像度でレンダリングし、鮮明に保ちます。キャンバスに描画するものはそれに応じて拡大表示されます。

しかし、私はこの単純な例のために推薦することはちょうどそうのようなHTML、CSS、およびJavaScriptでそれをやっている：

var showText = function (target, message, index, interval) { 
 
    if (index < message.length) { 
 
    $(target).append(message[index++]); 
 
    setTimeout(function() { showText(target, message, index, interval); }, interval); 
 
    } 
 
} 
 

 

 
$(function() { 
 

 
    showText("#text", "you can live a beatiful life with a postive mind", 0, 100); 
 

 
});

#canvas{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 80vh; 
 
    overflow:hidden; 
 
    background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#text { 
 

 
    position: absolute; 
 
    top: 50%; 
 
    left: 20px; 
 
    color: #fff; 
 
    font-size: 20px; 
 
    
 
}

<div id="canvas"> 
 
    <p id="text"> </p> 
 
</div>

は、私はあなたにそれを任せますテキストとそれ以外のものを配置しますが、この例ではテキストを必要に応じて小さくまたは大きくすることができます。

しかし

...あなたはまだ絶対にそれは、次の例では、作品のキャンバスにする必要がある場合。これは、キャンバスがCSSによって伸ばされていないために機能し、幅と高さはあらかじめ定義されています。

canvas要素は、デバイスまたはモニタのピクセル比率から独立して実行されます。

iPad 3以降では、この比率は2です。これは、1000px幅のキャンバスが、iPadディスプレイ上の幅に合わせて2000pxを塗りつぶす必要があることを意味します。幸いにも私たちにとっては、これはブラウザによって自動的に行われます。一方、これは、可視領域に直接フィットするように作られた画像やキャンバス要素の定義が少なくなる理由です。あなたのキャンバスは1000pxの塗り方しか知りませんが、2000pxに描画するように求められているので、ブラウザはピクセル間の空白をインテリジェントに埋めて、要素を適切なサイズで表示する必要があります。

高精細度要素の作成方法を詳しく説明しているHTML5Rocksの記事thisを読むことをお勧めします。

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.font = "12px Arial"; 
 
ctx.fillText("Hello World",10,50);

#canvas{ 
 
    position: relative; 
 
    overflow:hidden; 
 
    background-image: url('http://linux2.gps.stthomas.edu/~algh3635/practice/proj/img/img4.jpeg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="canvas" width="800" height="500" 
 
style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the canvas element. 
 
</canvas> 
 

 

 
</body> 
 
</html>

出典

2017-11-17 02:33:27 Jesus

それは働いている、しかし、私が望んでいたことはテキストを描画してアニメーション化するキャンバスのプロパティを使用しています。ありがとうございます – Ahmed

@Ahmedなぜですか？何らかの理由？ほとんどのWeb開発者はキャンバスを使用しません – Jesus

それはちょうど割り当ての要件です:) – Ahmed

キャンバス要素にテキストを描画する

答えて

関連する問題