html5 is the fifth major revision of Hypertext Markup Language (HTML), an application under the Standard Generalized Markup Language, the core language of the World Wide Web. HTML 4.01 has changed a lot since 1999, and today, several of the elements that were deprecated in HTML 4.01 have been removed or redefined in HTML5. In order to better handle today’s Internet applications, HTML5 adds many new elements and features, such as: graphics drawing, multimedia content, better page structure, better form handling, and several api drag-and-drop elements, positioning, including web application caching, storage, web workers, and more.

tab (of a window) (computing)

descriptive

tag defines graphics, such as charts and other images. This tag is based on the JavaScript drawing API

The effect is demonstrated:

Your browser does not support H5

Code section:

你的浏览器不支持H5

<! – get canvas object –> var my_canvas = document.getElementById(“my-canvas”); <! – get brush –> var my_huabi = my_canvas.getContext(“2d”); var x = 50; var y = 50; var r = 20; function deawBall(x,y){ <! – Set the brush color –> my_huabi.fillStyle = “green”; <! – Start a new path –> my_huabi.beginPath(); <! – Draw the blob –> my_huabi.arc(x, y, r, 0, 2 * Math.PI); <! – Close the path –> my_huabi.fill(); } var fx_x = true;//when fx_x is true, move to x-axis var fx_y = true;//when fx_y is true, move to y-axis var speen = 1; <! – Timer –> window.setInterval(“moveBall()”, 10); function moveBall(){ <! – Determine current direction of ball movement –> if(fx_x == true){ x += speen; if(x >= 500-r){ <! – when bottom is reached, bounce up –> fx_x = false; } } }else{ x -= speen; if(x <= 0+r){ <! – when top is reached, bounce down –> fx_x = true; } } } if(fx_y == true){ y += speen; if(y >= 400-r){ <! – when left is reached, bounce to the right –> fx_y = false; } } }else{ y -= speen; if(y <= 0+r){ <! – pop to the left when the right is reached –> fx_y = true; } } <! – clear canvas redraw –> my_huabi.clearRect(0, 0, 500, 400); deawBall(x, y); }