Este ejemplo es una instancia de carga de carga web HTML5 Simulation Web. Las representaciones son las siguientes:
El código de ejemplo: (dirección de vista previa: http://html5demos.com/canvas)
- <! Doctypehtml>
- <htmllang = enxmlns = http: //www.w3.org/1999/xhtml>
- <Evista>
- <metahttp-oquiv = content-typeContent = text/html; charset = utf-8/>
- <title> html5Demo: Canvas </title>
- <estilo>
- cuerpo{
- fuente: normal16px/20pxhelvetica, sans-serif;
- Antecedentes: RGB (237,237,236);
- margen: 0;
- margen-top: 40px;
- relleno: 0;
- }
- artículo, sección, encabezado, pie de página {
- Pantalla: bloque;
- }
- #envoltura{
- Ancho: 600px;
- margen: 0auto;
- fondo: #fffurl (imágenes/shade.jpg) repetir-xcenterbottom;
- -Moz-Border-Radius: 10px;
- -WebKit-Border-Radius: 10px;
- border-top: 1pxsolid#ffff;
- Bottom: 76px;
- }
- H1 {
- Top-top: 10px;
- }
- H2 {
- tamaño de fuente: 100%;
- estilo de fuente: cursiva;
- }
- encabezamiento,
- artículo>*,
- Pootera,
- pie de página {
- margen: 20px;
- }
- pie de página>*{
- margen: 20px;
- Color:#999;
- }
- artículo{
- Posición: relativo;
- }
- </style>
- <script>
- //FordiscussionAndcomments,eee:http://remysharp.com/2009/01/07/html5-enabling-script/
- (function () {if (!/*@cc_on!@*/0) return; vare = abbr, artículo, aparte, audio, bb, lienzo, datagrid, dataList, detalles, diálogo, eventsurce, figura, foo ter, encabezado, marca, menú, medidor, NAV, salida, progreso, sección, tiempo, video.split (','), i = e.length; while (i-) {document.createElement (e [i])}}) () ()
- </script>
- </ablo>
- <Body>
- <sectionId = wrapper>
- <Header>
- <h1> Canvas </h1>
- </Header>
- <artículo> </artículo>
- <Tooter> <href =/> html5demo </a> </footer>
- </section>
- <scriptsrc = h5utils.js> </script>
- <script>
- buildspinner ({x: 50, y: 50, tamaño: 20, grados: 30});
- functionBuildSpinNer (data) {
- varcanvas = document.createElement ('Canvas');
- Canvas.Height = 100;
- Canvas.Width = 300;
- document.getElementsBytagName ('Artículo') [0] .AppendChild (Canvas);
- varctx = canvas.getContext (2d),
- i = 0, grados = data.degrees, loops = 0, DegreesList = [];
- para (i = 0; i <grados; i ++) {
- Degreeslist.push (i);
- }
- //reiniciar
- i = 0;
- // Soicankillitlater
- Window.CanVastimer = setInterval (dibujar, 1000/grados);
- functionReset () {
- CTX.ClearRect (0,0,100,100); // ClearCanvas
- varleft = Degreeslist.slice (0,1);
- varright = DegreesList.slice (1, DegreesList.Length);
- DegreesList = right.concat (izquierda);
- }
- functionDraw () {
- VARC, S, E;
- vard = 0;
- if (i == 0) {
- reiniciar();
- }
- ctx.save ();
- d = Degreeslist [i];
- C = Math.floor (255/grados*i);
- ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
- ctx.linewidth = data.size;
- ctx.beginpath ();
- s = Math.floor (360/grados*(d));
- e = math.floor (360/grados*(d+1))-1;
- ctx.arc (data.x, data.y, data.size, (math.pi/180)*s, (math.pi/180)*e, falso);
- ctx.stroke ();
- ctx.restore ();
- i ++;
- if (i> = grados) {
- i = 0;
- }
- }
- }
- </script>
- <script>
- varGajshost = ((https: == document.location.protocol)? https: // ssl .: http: // www.);
- document.write (unescape (%3cscriptsrc = '+gajshost+google-analytics.com/ga.js'type =' text/javaScript '%3e%3c/script%3e));
- </script>
- <script>
- intentar{
- varpagetracker = _gat._getTracker (UA-1656750-18);
- pagetracker._trackpageView ();
- } catch (err) {} </script>
- </body>
- </html>