Bagaimana untuk menambah penskalaan mendatar lalai pada teks jenis kanvas menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menambah penskalaan mendatar lalai pada teks jenis kanvas menggunakan JavaScript?

王林

Lepaskan： 2023-08-24 10:45:08

ke hadapan

964 orang telah melayarinya

Bagaimana untuk menambah penskalaan mendatar lalai pada teks jenis kanvas menggunakan JavaScript?

Kami boleh menambah penskalaan mendatar lalai untuk teks jenis kanvas dengan mengakses konteks kanvas dan menetapkan sifat skala kepada nilai tertentu. Ini dicapai dengan memanggil kaedah zum konteks dan menghantar nilai zum mendatar yang dikehendaki. Dengan melakukan ini, semua teks yang dilukis pada kanvas akan menggunakan penskalaan mendatar lalai.

Kanvas HTML

Kanvas HTML ialah permukaan lukisan 2D yang boleh digunakan untuk mencipta grafik, carta dan animasi yang dinamik dan interaktif pada halaman web. Ia adalah elemen HTML yang membolehkan pembangun melukis grafik menggunakan JavaScript.

Elemen kanvas ialah bekas untuk grafik yang boleh menggunakan API kanvas untuk melukis bentuk, teks dan imej. Ia ialah alat berkuasa yang membolehkan pembangun mencipta pengalaman pengguna yang kaya dan interaktif di web tanpa menggunakan perpustakaan luaran atau pemalam.

Kaedah

Untuk menambah penskalaan mendatar lalai pada teks jenis kanvas menggunakan JavaScript, anda boleh mengikuti langkah ini −

Buat elemen kanvas dan tetapkan lebar dan tingginya.
Dapatkan konteks 2D kanvas dengan memanggil kaedah getContext().
Gunakan kaedah fillText() untuk melukis teks pada kanvas.
Tetapkan penskalaan mendatar lalai dengan memanggil kaedah skala() pada konteks 2D dan menghantar faktor penskalaan sebagai hujah pertama.
Gunakan kaedah fillText() untuk melukis semula teks pada kanvas.

Berikut ialah contoh yang menunjukkan cara untuk menyelesaikan tugasan ini −

// Create a canvas element
var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;

// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");

// Draw the text on the canvas
ctx.fillText("Hello World!", 50, 50);

// Set the default horizontal scaling
ctx.scale(1.5, 1);

// Draw the text again on the canvas
ctx.fillText("Hello World!", 50, 50);

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Canvas Text Scaling</title>
</head>
   <body>
      <canvas id="myCanvas"></canvas>
      <script>
         // Get the canvas element by its id
         var canvas = document.getElementById("myCanvas");
         canvas.width = 500;
         canvas.height = 500;
         
         // Get the 2D context of the canvas
         var ctx = canvas.getContext("2d");
         
         // Set the font and text color
         ctx.font = "30px Arial";
         ctx.fillStyle = "black";
         
         // Draw the text on the canvas
         ctx.fillText("Hello World!", 50, 50);
         
         // Set the default horizontal scaling
         ctx.scale(1.5, 1);
         
         // Draw the text again on the canvas
         ctx.fillText("Hello World!", 50, 100);
      </script>
   </body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Penjelasan

ialah:

Penjelasan

Dalam contoh ini, teks "Hello World!" dilukis pada kanvas dengan penskalaan mendatar lalai 1.5. Ini bermakna teks akan diskalakan 1.5x secara mendatar, menjadikannya kelihatan lebih luas pada kanvas. Teks akan dilukis dua kali, pertama pada saiz biasa dan kedua pada saiz berskala 1.5x.

Atas ialah kandungan terperinci Bagaimana untuk menambah penskalaan mendatar lalai pada teks jenis kanvas menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!