H5 new label canvas canvas

canvas is written in the body of the label, after setting the width and height, and from the contents drawn by JS want,

canvas can be understood as a drawing board, and JS is your paintbrush,

1. Get to the canvas

var canvas = document.getElementById("canvas");

2.getContext () method returns an object, which provides methods and properties for drawing on the canvas.

var cxt = canvas.getContext("2d")

Draw text

1. First set the font style

　　cxt.font = "bold 30px bold";

2. Set the font color

　　cxt.fillStyle = 'green';

3. Set the font content

　　cxt.fillText ( 'My text', 50, 60)
　　in the font content, cxt.fillText (text, X-axis, Y-axis)

And text content, fill solid, stroke hollow

fillStyle applies to all solid content;

strokeStyle hollow applies to all content;

Drawing a rectangle (as in the drawing left corner point):

fill  /  stroke  Rect(x,y,w,h)

x: the x axis

y: the y axis

w: width of the rectangle

h: length of the rectangle

 

Draw a rectangle shadow

　Shadow blur distance

ctx.shadowBlur = 20; 
shadow color blur

ctx.shadowColor="black";