HTML5 3D clothes swing animation effects

This is a HTML5 Canvas based 3D animation masterpiece,it is can let 3D clothes swing animation effects,very realistic.When we slide the mouse over the clothes,clothes will appear to swing animation,when you click the mouse,the clothes will be more violent swings. HTML code XML/HTML Code <div style=”width:500px;margin:10px auto”> <canvas id=”cv” width=”480″ height=”300″></canvas> <p>”3D on 2D Canvas” demo</p> <p>move cursor to pan / click to swing</p> </div>   P3D library JS code, mainly used to deal with the effect of 3D   […]

Read More Here! 0

Mobile terminal HTML5 to achieve file upload function

PC end upload files mostly use plug-ins,the introduction of flash it doesn’t matter, In the project which needs to do the function of image upload,now that html5 has been related to the interface and good compatibility,of course, give priority to using html5 to achieve. The major technologies used are:ajax,FileReader and FormData   HTML structure: JavaScript Code <div class=”camera-area”> <form enctype=”multipart/form-data” method=”post”> <input type=”file” name=”fileToUpload” class=”fileToUpload” accept=”image/*” capture=”camera”/> <div class=”upload-progress”><span></span></div> </form> <div class=”thumb”></div> </div> Has been packaged upload.js,reliance zepto JavaScript Code […]

Read More Here! 0

Based on the HTML5 drawing circular multi angle pattern

This article is mainly introduces the based on the HTML5 achieve circular multi angle pattern.If you in need, you can for reference. First look at the most simple effect chart: Code as follows:   JavaScript Code var canvas = document.getElementById(‘my’), ctx = canvas.getContext(‘2d’); setInterval(function(){ ctx.clearRect(0,0,400,400); ctx.save(); ctx.translate(200,200); var ci =90, pi = Math.PI / ci, x1 = 100, y1 =0, x2 =0, y2 =0, x3 =0, y3 =0; ctx.beginPath(); for(var i = ci *2; i >0; i–){ ctx.rotate(pi); ctx.moveTo(x1,y1); y2 […]

Read More Here! 0

HTML5 local database infrastructure operational details

In the local database that we can directly use JavaScript to create the database,and use the SQL statement execution related database operations.For complex database,HTML5 use the local database operations, if friends in need, for reference. The following are respectively introduce in the local database of each API and its use method.   1.Using the openDatabase create a database We can use the openDatabase method to create a database.The openDatabase method is passed five parameters, they are respectively database name, database […]

Read More Here! 0

HTML5 Canvas to draw simple image tutorial

Get image object, new out Defines the src property of the image object,parameter: image path Onload method for defining image object,the drawImage() method of call context object,parameters: image object, x coordinate, y coordinate Overloading methods,the drawImage() method of call context object,parameters:image object, x coordinate, y coordinate,image width, height Overloading methods,the drawImage() method of call context object,parameters: image object,x coordinate of the image,y coordinate of the image,rectangular width,rectangular height,painting on canvas for the x coordinate,painting on canvas for the y coordinate,image […]

Read More Here! 0

HTML5 to achieve the client to verify the size of the upload file

In HTML5, we can check in during the file upload to the client,for example, after the user selects a file,can be immediately check the size and properties of the file, etc.,this is actually due to the new browser side of the file verification capability,which supports HTML 5 browser,will achieve the W3C implementation of the document API standard,which can read all kinds of information and parameters of the client file. Specific examples are as follows, the first is the HTML   […]

Read More Here! 0

Implementation method of html5 call camera

Here I will bring you an article about implementation method of html5 call camera,I feel very good,now share with everyone, also to be a reference for everyone. XML/HTML Code <!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <title>GetUserMedia example</title> </head> <body> <video id=”video” autoplay><ideo> </body> <script type=”text/javascript”> var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); getUserMedia.call(navigator, { video: true, audio: true }, function(localMediaStream) { var video = document.getElementById(‘video’); video.src = window.URL.createObjectURL(localMediaStream); video.onloadedmetadata = function(e) { console.log(“Label: ” + localMediaStream.label); […]

Read More Here! 0

Understanding of HTML5 FormData object

FormData is a new encapsulating object of the HTML5 standard,with FormData objects, you can easily create the form data by javascript,sent directly to the server by ajax. The current support for the browser is:  

Read More Here! 0

Simple examples of HTML5 drag and drop

Drag Related Properties The draggable attribute is the global property of HTML5,is one of the ways in which html5 supports drag and drop operation,it is used to indicate whether the element can be dragged and dropped,draggable has three values,true representation can be drag and drop,false representation can not be dragged and dropped,auto represents the default value of the browser. XML/HTML Code <ul> <li id=”item1″ draggable=”true”>list1</li> <li id=”item2″ draggable=”true”>list2</li> <li id=”item3″ draggable=”true”>list3</li> <li id=”item4″ draggable=”true”>list4</li> <li id=”item5″ draggable=”true”>list5</li> <li id=”item6″ draggable=”true”>list6</li> […]

Read More Here! 0

About html5 enhanced page elements

About html5 enhanced page elements   XML/HTML Code <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>about html5 enhanced page elements</title> </head> <body> <!–figure and figcaption:combination of elements with an optional title–> <figure> <img src=”img/QQ screenshot 20160103144626.png”  alt=”image”/> <img src=”img/webp.jpg” alt=”image” width=”211″ height=”191″/> <figcaption>my image mix</figcaption> </figure><br /> <!–detail and summary elements:used to mark that the sub element inside the element can be expanded and contracted to display.–> <details id=”details” ontoggle=”detailfn(this)” style=” cursor: pointer;” > <summary>Legend of the Fist</summary> <p id=”p” style=”visibility: […]

Read More Here! 0

HTML5 forms and new improved elements detailed

  XML/HTML Code <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title></title> </head> <body> <!–The form property of the element in the form:Specify a form properties for element,property value for the form id–> <form id=”testform”> <input type=”submit” /> </form> <textarea form=”testform”></textarea> <br /><hr /> <!–the formaction property of the element in the form:can be submitted to different pages–> <form id=”form1″ action=”test.aspx”> <input type=”submit” name=”s1″ value=”internal submitted to test2″ formaction=”test2.aspx” /> <input type=”submit”  /> </form> <!–formmethod:can be for each form element specified different […]

Read More Here! 0

HTML5 canvas drawing rectangular and circular example code

HTML5 canvas drawing rectangular and circular example code JavaScript Code <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title></title> </head> <body onload=”draw(),drawarc()”> <!–drawing steps:get canvas elements->get context->fill and draw border->set drawing style–> <!–drawing other complex graphics need to use path:start creating path->creating graphics path->close path->drawing graphics–> <!–eg:draw rectangle–> draw rectangle:<canvas id=”ca”></canvas><br /> draw circular :<canvas id=”yuan”></canvas> </body> </html> <script> //draw rectangle function draw(){ var canvas=document.getElementById(‘ca’); //get canvas elements if (canvas==null) return false; var context=canvas.getContext(‘2d’); //get context context.fillStyle=’#EEEFF’;   //fill color context.fillRect(0,0,400,300); //filled rectangle […]

Read More Here! 0

Usage of header tags in HTML5

The <header> tag definition document header,usually some guidance and navigation information.It is not limited to the writing on the page header,can also be written in the web page content. In the new standard header tags are defined as follows: “A group of introductory or navigational aids.” Header tags is not just define the page header content,can also define the header following the introduction of other content. This is not exactly the same as our traditional page header definition. Usually the […]

Read More Here! 0

HTML5 Canvas basic drawing – draw pentagram

<canvas></canvas> is a new tags in HTML5,to be used for draw graphics.In fact,this tag is the same as any other label,the special point is this tag can get a CanvasRenderingContext2D object,we can through using the JavaScript script to control this objects for drawing. <canvas></canvas>just a graphing of the container,in addition to the id, class, style and other properties,as well as height and width attributes.On the <canvas> element drawing,there are mainly three steps: 1.Get <canvas> element corresponding DOM object,this is a […]

Read More Here! 0

HTML5 Canvas basic drawing – draw line

<canvas></canvas> is a new tags in HTML5,to be used for draw graphics.In fact,this tag is the same as any other label,the special point is this tag can get a CanvasRenderingContext2D object,we can through using the JavaScript script to control this objects for drawing. <canvas></canvas>just a graphing of the container,in addition to the id, class, style and other properties,as well as height and width attributes.On the <canvas> element drawing,there are mainly three steps: 1.Get <canvas> element corresponding DOM object,this is a […]

Read More Here! 0

HTML5 canvas basic drawing – fillstyle

<canvas></canvas> is a new tags in HTML5,to be used for draw graphics.In fact,this tag is the same as any other label,the special point is this tag can get a CanvasRenderingContext2D object,we can through using the JavaScript script to control this objects for drawing. <canvas></canvas>just a graphing of the container,in addition to the id, class, style and other properties,as well as height and width attributes.On the <canvas > element drawing,there are mainly three steps: 1.Get <canvas> element corresponding DOM object,this is […]

Read More Here! 0

HTML5 canvas basic drawing – graphics transformation

<canvas></canvas> is a new tags in HTML5,to be used for draw graphics.In fact,this tag is the same as any other label,the special point is this tag can get a CanvasRenderingContext2D object,we can through using the JavaScript script to control this objects for drawing. <canvas></canvas>just a graphing of the container,in addition to the id, class, style and other properties,as well as height and width attributes.On the <canvas> element drawing,there are mainly three steps: 1.Get <canvas> element corresponding DOM object,this is a […]

Read More Here! 0

HTML5 Canvas basic drawing – text rendering

There are three main attributes and three method relating to text rendering: The basic usage of the above properties and methods are as follows:   JavaScript Code var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); context.font=”bold 30px Arial”; //set style context.strokeStyle = “#1712F4”; context.strokeText(“welcome to my blog!”,30,100); context.font=”bold 50px Arial”; var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//set gradient padding style grd.addColorStop(0,”#1EF9F7″); grd.addColorStop(0.25,”#FC0F31″); grd.addColorStop(0.5,”#ECF811″); grd.addColorStop(0.75,”#2F0AF1″); grd.addColorStop(1,”#160303″); context.fillStyle = grd; context.fillText(“welcome to my blog!”,30,200); context.save(); context.moveTo(200,280); context.lineTo(200,420); context.stroke(); […]

Read More Here! 0