Contoh ini adalah instance pemuatan Web Simulasi Canvas HTML5. Rendering adalah sebagai berikut:
Kode Contoh: (Alamat Pratinjau: http://html5demos.com/canvas)
- <! Doctypehtml>
- <htmlang = enxmlns = http: //www.w3.org/1999/xhtml>
- <head>
- <METAHTTP-EQUIV = Content-TypeContent = Text/html; charset = UTF-8/>
- <title> html5demo: canvas </iteme>
- <tyle>
- tubuh{
- Font: Normal16px/20pxhelvetica, sans-serif;
- Latar belakang: RGB (237.237.236);
- Margin: 0;
- margin-top: 40px;
- Padding: 0;
- }
- Artikel, bagian, header, footer {
- Tampilan: Blok;
- }
- #pembungkus{
- Lebar: 600px;
- Margin: 0Auto;
- Latar Belakang: #FFFURL (Images/Shade.jpg) Repeat-XCenterBottom;
- -Moz-border-Radius: 10px;
- -webkit-border-radius: 10px;
- Border-top: 1pxsolid#ffff;
- padding-bottom: 76px;
- }
- h1 {
- Padding-top: 10px;
- }
- h2 {
- Ukuran font: 100%;
- Font-style: Italic;
- }
- header,
- Artikel>*,
- footera,
- footerp {
- margin: 20px;
- }
- footer>*{
- margin: 20px;
- Warna:#999;
- }
- artikel{
- Posisi: kerabat;
- }
- </tyle>
- <script>
- //Fordiscussionandcomments ,see:http://remysharp.com/2009/01/07/html5-enabling-script/
- (function () {if (!/*@cc_on!@*/0) return; vare = abbr, artikel, samping, audio, bb, kanvas, datagrid, distalist, detail, dialog, eventsource, gambar, foo ter, header, tanda, menu, meter, nav, output, kemajuan, bagian, waktu, video.
- </script>
- </head>
- <body>
- <SectionId = Wrapper>
- <Header>
- <h1> Canvas </h1>
- </teader>
- <cartikel> </artikel>
- <footer> <haRref =/> html5demo </a> </footer>
- </section>
- <ScriptSrc = h5utils.js> </script>
- <script>
- buildspinner ({x: 50, y: 50, ukuran: 20, derajat: 30});
- FunctionBuildSpinner (data) {
- varcanvas = document.createElement ('Canvas');
- Canvas.Height = 100;
- Canvas.width = 300;
- document.getElementsbyTagname ('artikel') [0] .AppendChild (Canvas);
- varctx = canvas.getContext (2D),
- i = 0, derajat = data.
- untuk (i = 0; i <degrees; i ++) {
- DegReesList.push (i);
- }
- //mengatur ulang
- i = 0;
- // soicankillitlater
- window.canvastimer = setInterval (gambar, 1000/derajat);
- functionReset () {
- ctx.clearrect (0,0,100,100); // clearcanvas
- varleft = degreeslist.slice (0,1);
- varright = degreeslist.slice (1, degreeslist.length);
- DegReesList = right.concat (kiri);
- }
- functionDraw () {
- varc, s, e;
- vard = 0;
- if (i == 0) {
- mengatur ulang();
- }
- ctx.save ();
- d = DegReesList [i];
- C = Math.floor (255/derajat*i);
- ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
- ctx.linewidth = data.size;
- ctx.beginpath ();
- s = math.floor (360/derajat*(d));
- E = Math.floor (360/derajat*(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> = derajat) {
- i = 0;
- }
- }
- }
- </script>
- <script>
- vargaajshost = ((https: == document.location.protocol)? https: // ssl .: http: // www.);
- document.write (unescape (%3cscriptsrc = '+gajshost+google-analytics.com/ga.js'type =' text/javascript '%3e%3c/skrip%3e));
- </script>
- <script>
- mencoba{
- varpagetracker = _gat._gettracker (ua-1656750-18);
- pagetracker._trackpageView ();
- } catch (err) {} </script>
- </body>
- </html>