Latest web development tutorials

HTML canvas strokeText () metode

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML

contoh

Gunakan strokeText (), menulis pada teks kanvas "Halo dunia!" Dan (Dengan gradien) "Big senyum!":

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);

Coba »

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome dan Safari dukungan strokeText () metode.

Catatan: 8 dan versi sebelumnya dari Internet Explorer tidak mendukung <canvas> elemen.

Catatan: Safari tidak mendukung parameter MaxWidth.


Definisi dan Penggunaan

Metode strokeText () untuk menggambar teks pada kanvas (tanpa isi warna). Warna teks default adalah hitam.

Tip: Gunakan huruf atribut untuk menentukan ukuran font dan font, dan menggunakan strokeStyle properti untuk warna lain / gradien untuk membuat teks.

sintaks JavaScript: konteks .strokeText (teks, x, y, MaxWidth);

Nilai parameter

参数 描述
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置(相对于画布)。
y 开始绘制文本的 y 坐标位置(相对于画布)。
maxWidth 可选。允许的最大文本宽度,以像素计。


Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML