HTML study notes, html notes

HTML study notes, html notes

1. video tag

Src: Path

Height: height

Width: width

Autoplay: automatic playback after video Loading

Controls: controls provides temporary operation buttons for playing.

<Video src = "audio/shake.wav" height = "1000px;" width = "1000px;" autoplay = "autoplay" controls = "controls"> </video>

2. audio tag

Same as above

<Audio src = "audio/friendshipping" autoplay = "autoplay" controls = "controls"> </audio>

3. canvas

<Canvas id = "c1" onmousemove = "asm (event)" onmouseout = "ost ()"> </canvas>

3.1 draw a regular rectangle

　

Var PC3 = document. getElementById ("c1"); var c2d = cc1.getContext ("2d"); // obtain the Drawing Object c2d. fillStyle = "# 0000FF"; // fill the c2d style. strokeStyle // border style c2d. fillRect (150,175, 10,); // start point x, y width and height-border c2d. strokeRect (150,175, 10,); // start point x, y width and height-fill mode function asm (e) {var x = e. clientX; // obtain the value of X var y = e. clientY; // obtain the document value of Y. getElementById ("show "). innerHTML = "X:" + x + "-y:" + y;} function ost () {document. getElementById ("show "). innerHTML = "";}

 

3.2 draw a triangle

<Canvas id = "ca1"> </canvas> var can1 = document. getElementById ("ca1 "). getContext ("2d"); can1.moveTo (); can1.lineTo (); can1.lineTo (); can1.fill (); // fill can1.stroke (); // draw a boundary