Current location - Quotes Website - Signature design - How to write text effects in html5 canvas
How to write text effects in html5 canvas

Canvas - text

Use canvas to draw text. The important properties and methods are as follows:

font - define font

fillText(text ,x,y) - Draw solid text on canvas

strokeText(text,x,y) - Draw hollow text on canvas

Use fillText():

Example

Use "Arial" font to draw a 30px high text (solid) on the canvas:

JavaScript:var?c=document.getElementById("myCanvas ");

var?ctx=c.getContext("2d");

ctx.font="30px?Arial";

ctx.fillText ("Hello? World",10,50);

Use strokeText():

Example

Use "Arial" font to draw a high height on the canvas 30px text (hollow): var?c=document.getElementById("myCanvas");

var?ctx=c.getContext("2d");

ctx.font ="30px?Arial";

ctx.strokeText("Hello?World",10,50);

Reference source: HTML5 Canvas_w3cschool ?/html5/q2ybmfle.html