HTML Canvas teksti

Draw text on the canvas

The most important properties and methods to draw text on the canvas are:

• font - Define the font properties of the text
• fillText(text,x,y) - Draw "filled" text on the canvas
• strokeText(text,x,y) - Draw text on the canvas (no fill)

Use fillText()

实例

Set the font to "30px Arial" and write filled text on the canvas:

JavaScript:

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

Kokeile itse

Use strokeText()

实例

Set the font to "30px Arial" and write text on the canvas (not filled):

JavaScript:

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

Kokeile itse

Add color and center text

实例

Set the font to "30px Comic Sans MS" and write filled red text in the center of the canvas:

JavaScript:

const canvas = document.getElementById("myCanvas");
const 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);

Kokeile itse

Lisätietoja:

CodeW3C.com:n täydellinen Canvas viittausopas