tutorial pengembangan web terbaru
 

HTML Canvas Text


Menggambar teks pada kanvas

Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:

  • font - mendefinisikan properti font untuk teks
  • fillText( text,x,y ) - menarik "filled" teks pada kanvas
  • strokeText( text,x,y ) - menarik teks pada kanvas (no fill)

Menggunakan fillText()

Contoh

Mengatur font untuk 30px "Arial" dan menulis teks penuh di kanvas:

Browser Anda tidak mendukung tag kanvas HTML5.

JavaScript:

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

Menggunakan strokeText()

Contoh

Mengatur font untuk 30px "Arial" dan menulis teks, tanpa mengisi, di kanvas:

Browser Anda tidak mendukung tag kanvas HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Cobalah sendiri "

Tambahkan warna dan Pusat Text

Contoh

Mengatur font untuk 30px "Comic Sans MS" dan menulis teks merah diisi di tengah kanvas:

Browser Anda tidak mendukung tag kanvas HTML5.

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
Cobalah sendiri "