Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

キャンバスサイズに基づくHTML5キャンバスフォントサイズ

フォントを拡大縮小するには、例を見てみましょう。

Canvas: 800px Font Size: 60px

この例では、キャンバスに基づいてフォントサイズをスケーリングするには、次のコードを使用する必要があります-

var fontBase = 800;
var fontSize = 60;

function getFont() {
   var ratio = fontSize / fontBase;
   var cSize = canvas.width * ratio;
   return (cSize |0) + 'px sans-serif';
}

  1. HTML5キャンバス変換

    HTML5キャンバスは、変換行列を直接変更できるメソッドを提供します。変換行列は、最初はID変換である必要があります。その後、変換方法を使用して調整できます。 例 キャンバス変換の例を見てみましょう： <!DOCTYPE HTML> <html>    <head>       <script>          function drawShape(){             //

  2. HTML5キャンバスctx.fillTextは改行を行いません

    fillText（）メソッドは、塗りつぶされたテキストをキャンバスに描画します。行を分割したい場合は、新しい行でテキストを分割し、filltext（）を複数回呼び出すことでこれを行うことができます。そうすることで、テキストを線に分割し、各線を別々に描画します。 次のコードスニペットを実行してみてください- var c = $('#c')[0].getContext('2d'); c.font = '12px Courier'; alert(c); var str = 'first line \nsecond line...';