Este exemplo é uma instância de carregamento de carregamento da Web de simulação HTML5 de tela. As renderizações são as seguintes:
O código de exemplo: (endereço de visualização: http://html5demos.com/canvas)
- <! Doctypehtml>
- <htmllang = enxmlns = http: //www.w3.org/1999/xhtml>
- <head>
- <metahttp-equiv = content-typeContent = text/html; charset = utf-8/>
- <title> html5Demo: Canvas </ititle>
- <estilo>
- corpo{
- Fonte: Normal16px/20pxhelvetica, sem serrif;
- Antecedentes: RGB (237.237.236);
- margem: 0;
- Margin-top: 40px;
- preenchimento: 0;
- }
- Artigo, seção, cabeçalho, rodapé {
- exibição: bloco;
- }
- #wrapper {
- Largura: 600px;
- margem: 0auto;
- Antecedentes: #fffurl (imagens/shade.jpg) repetir-xcenterbottom;
- -Moz-Border-Radius: 10px;
- -Webkit-Border-Radius: 10px;
- TOP da borda: 1PXSolid#ffff;
- Botting-Bottom: 76px;
- }
- H1 {
- Top-top: 10px;
- }
- H2 {
- tamanho de fonte: 100%;
- estilo de fonte: itálico;
- }
- cabeçalho,
- Artigo>*,
- Fofera,
- Footerp {
- margem: 20px;
- }
- ROONO>*{
- margem: 20px;
- Cor:#999;
- }
- artigo{
- Posição: relativa;
- }
- </style>
- <Cript>
- //Fordiscussionandcomments,see:http://remysharp.com/2009/01/07/html5-enabling-script/
- (function () {if (!/*@cc_on!@*/0) return; vare = abbr, artigo, de lado, áudio, bb, tela, datagrid, dados de dados, detalhes, diálogo, eventos e figura, foo ter, cabeçalho, marca, menu, medidor, navegação, saída, progresso, seção, tempo, vídeo.split (','), i = e.length; while (i-) {document.createElement (e [i])}}) ()
- </script>
- </head>
- <Body>
- <Seção (Wrapper>
- <header>
- <H1> Canvas </h1>
- </header>
- <Artigo> </Artigo>
- <Footer> <ahref =/> html5demo </a> </dower>
- </seção>
- <scriptsrc = h5utils.js> </sCript>
- <Cript>
- BuildSpinner ({x: 50, y: 50, tamanho: 20, graus: 30});
- FunctionBuildSpinner (Data) {
- varcanvas = document.createElement ('canvas');
- canvas.Height = 100;
- canvas.width = 300;
- document.getElementsByTagName ('Artigo') [0] .AppendChild (Canvas);
- Varctx = Canvas.getContext (2d),
- i = 0, graus = data.degrees, loops = 0, grausList = [];
- para (i = 0; i <graus; i ++) {
- grauslist.push (i);
- }
- //reiniciar
- i = 0;
- // Soicankillitlater
- window.CanVastIMer = setInterval (desenho, 1000/graus);
- functionReset () {
- ctx.clearrect (0,0,100.100); // clearCanvas
- varleft = grausList.slice (0,1);
- Varright = grausList.slice (1, grausList.Length);
- grausList = Right.Concat (esquerda);
- }
- functionDraw () {
- Varc, S, E;
- vard = 0;
- if (i == 0) {
- reiniciar();
- }
- ctx.save ();
- d = grausList [i];
- c = math.floor (255/graus*i);
- ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
- ctx.linewidth = data.size;
- ctx.BeginPath ();
- s = math.floor (360/graus*(d));
- e = math.floor (360/graus*(d+1))-1;
- ctx.arc (data.x, data.y, data.size, (math.pi/180)*s, (math.pi/180)*e, false);
- ctx.stroke ();
- ctx.restore ();
- i ++;
- if (i> = graus) {
- i = 0;
- }
- }
- }
- </script>
- <Cript>
- 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>
- <Cript>
- tentar{
- VarPageTracker = _GAT._GetTracker (UA-1656750-18);
- pageTracker._trackPageView ();
- } catch (err) {} </sCript>
- </body>
- </html>