هذا المثال هو مثيل تحميل الويب HTML5 Canvas محاكاة. العروض كما يلي:
رمز المثال: (عنوان المعاينة: 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 </title>
- <style>
- جسم{
- الخط: Normal16px/20pxHelvetica ، Sans-Serif ؛
- الخلفية: RGB (237،237،236) ؛
- الهامش: 0 ؛
- الهامش: 40 بكسل ؛
- الحشو: 0 ؛
- }
- مقال ، قسم ، رأس ، تذييل {
- العرض: كتلة ؛
- }
- #إزار{
- العرض: 600 بكسل ؛
- الهامش: 0AUTO ؛
- الخلفية: #fffurl (الصور/الظل.
- -moz-border-Radius: 10px ؛
- -webkit-border-Radius: 10px ؛
- أعلى الحدود: 1pxsolid#ffff ؛
- حشوة القاع: 76 بكسل ؛
- }
- H1 {
- الحشو أعلى: 10 بكسل ؛
- }
- H2 {
- حجم الخط: 100 ٪ ؛
- على غرار الخط: مائل ؛
- }
- رأس ،
- المادة>*،
- فذي ،
- تذييل {
- الهامش: 20 بكسل ؛
- }
- تذييل>*{
- الهامش: 20 بكسل ؛
- اللون:#999 ؛
- }
- شرط{
- الموقف: قريب
- }
- </style>
- <script>
- //fordiscussionandcomments،see:http://remysharp.com/2009/01/07/html5-enabling-script/
- (function () {if (!/*@cc_on!@*/0) return ؛ vare = abbr ، article ، جانبا ، الصوت ، bb ، canvas ، dataGrid ، datalist ، التفاصيل ، مربع الحوار ، eventsource ، الشكل ، foo ter ، header ، mark ، menu ، meter ، nav ، output ، التقدم ، القسم ، الوقت ، video.split ('،') ، i = e.length ؛
- </script>
- </head>
- <body>
- <sectionId = clospper>
- <header>
- <h1> قماش </h1>
- </header>
- <article> </tistr>
- <Tower> <hhref =/> html5demo </a> </tower>
- </القسم>
- <scriptsrc = h5utils.js> </script>
- <script>
- BuildSpinner ({x: 50 ، y: 50 ، الحجم: 20 ، درجات: 30}) ؛
- وظيفة buildspinner (البيانات) {
- varcanvas = document.createElement ('canvas') ؛
- canvas.Height = 100 ؛
- canvas.width = 300 ؛
- document.getElementSbyTagName ('article') [0] .AppendChild (canvas) ؛
- varctx = canvas.getContext (2D) ،
- i = 0 ، degrees = data.degrees ، loops = 0 ، degreeslist = [] ؛
- لـ (i = 0 ؛ i <degrees ؛ i ++) {
- degreeslist.push (i) ؛
- }
- //إعادة ضبط
- أنا = 0 ؛
- // Soicankillitlater
- window.canvastimer = setInterval (رسم ، 1000/درجة) ؛
- FunctionReset () {
- ctx.clearrect (0،0،100،100) ؛ // clearcanvas
- varleft = degreeslist.slice (0،1) ؛
- varright = degreeslist.slice (1 ، degreeslist.length) ؛
- degreeslist = right.concat (يسار) ؛
- }
- functionDraw () {
- varc ، s ، e ؛
- vard = 0 ؛
- إذا (i == 0) {
- إعادة ضبط()؛
- }
- ctx.save () ؛
- d = degreeslist [i] ؛
- c = math.floor (255/degrees*i) ؛
- ctx.strokestyle = 'rgb ('+c+'،'+c+'،'+c+')' ؛
- ctx.linewidth = data.size ؛
- ctx.beginpath () ؛
- s = math.floor (360/degrees*(d)) ؛
- e = math.floor (360/degrees*(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 ++ ؛
- إذا (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>
- يحاول{
- varpageTracker = _gat._getTracker (UA-1656750-18) ؛
- pageTracker._trackPageView () ؛
- } catch (err) {} </script>
- </body>
- </html>