Dieses Beispiel ist eine HTML5 -Canvas -Simulation -Web -Lade -Ladeinstanz. Die Renderings sind wie folgt:
Der Beispielcode: (Vorschau -Adresse: http://html5demos.com/canvas)
- <! DocTypehtml>
- <htmllang = enxMlns = http: //www.w3.org/1999/xhtml>
- <kopf>
- <metahttp-äquiv = content-typecontent = text/html; charset = utf-8/>
- <title> html5demo: canvas </title>
- <Styles>
- Körper{
- Schriftart: normal16px/20pxhelvetica, sans-serif;
- Hintergrund: RGB (237.237.236);
- Rand: 0;
- Rand: 40px;
- Polsterung: 0;
- }
- Artikel, Abschnitt, Header, Fußzeile {
- Anzeige: Block;
- }
- #Verpackung{
- Breite: 600px;
- Rand: 0Auto;
- Hintergrund: #fffurl (Bilder/Shade.jpg) Repeat-XcenterBottom;
- -moz-border-radius: 10px;
- -Webkit-Border-Radius: 10px;
- Border-Top: 1pxsolid#ffff;
- Padding-Bottom: 76PX;
- }
- H1 {
- Padding-Top: 10px;
- }
- H2 {
- Schriftgröße: 100%;
- Schriftstil: kursiv;
- }
- Kopfball,
- Artikel>*,
- Footera,
- Fußzeilen {
- Rand: 20px;
- }
- Fußball>*{
- Rand: 20px;
- Farbe:#999;
- }
- Artikel{
- Position: Relativ;
- }
- </style>
- <Script>
- //FordiscussionAndComents,see
- (function () {if (!/*@cc_on!@*/0) return; vare = abbr, article, beiseite, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, fooo Ter, Header, Mark, Menü, Messgerät, Navigation, Ausgabe, Fortschritt, Abschnitt, Zeit, Video.Split (','), i = E.Length; while (i-) {document.createelement (e [i])}}) ())
- </script>
- </head>
- <body>
- <AbschnittID = Wrapper>
- <Header>
- <h1> canvas </h1>
- </header>
- <Aktion> </article>
- <footer> <ahref =/> html5demo </a> </footer>
- </Abschnitt>
- <scriptSrc = h5utils.js> </script>
- <Script>
- BuildSpinnner ({x: 50, y: 50, Größe: 20, Grad: 30});
- FunctionBuildspinnner (Daten) {
- varcanvas = document.createelement ('canvas');
- Canvas.Height = 100;
- canvas.width = 300;
- document.getElementsByTagName ('article') [0] .AppendChild (canvas);
- varctx = canvas.getContext (2D),
- i = 0, Grad = Daten.Degrees, Loops = 0, Gradlist = [];
- für (i = 0; i <Grad; i ++) {
- degreeslist.push (i);
- }
- //zurücksetzen
- i = 0;
- // Soicankillitlater
- Fenster.Canvastimer = setInterval (zeichnen, 1000/Grad);
- FunktionReset () {
- CTX.ClearRect (0,0,100.100); // Clearcanvas
- varleft = degreeslist.lice (0,1);
- varright = degreeslist.slice (1, degreeslist.length);
- degreeslist = rechts.concat (links);
- }
- functionDraw () {
- varc, s, e;
- vard = 0;
- if (i == 0) {
- zurücksetzen();
- }
- ctx.save ();
- d = Gradlist [i];
- C = Math.Floor (255/Grad*i);
- ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
- ctx.linewidth = data.Size;
- ctx.beginPath ();
- S = Math.Floor (360/Grad*(d));
- e = math.floor (360/Grad*(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> = Grad) {
- i = 0;
- }
- }
- }
- </script>
- <Script>
- vargajshost = ((https: == document.location.protocol)? https: // ssl .: http: // www.);
- document.write (unsCape (%3cScriptsrc = '+gajshost+google-Analytics.com/ga.js'type =' text/javaScript '%3e%3c/script%3E));
- </script>
- <Script>
- versuchen{
- VARPAGETRACKER = _gat._GetTracker (UA-1656750-18);
- pagetracker._trackpageView ();
- } catch (err) {} </script>
- </body>
- </html>