Home > Developer > Web Develop
<Style>canvas{border:1px solid #ccc;}</Style></Head><Body><CanvasId= "MyCanvas"width=500height=500></Canvas></Body><Script>var canvas = document.getElementById (' MyCanvas ');var ctx = Canvas.getcontext (' 2d ');var Originx = 250;var originy = 250;var radius = 100;SetInterval (function () {Ctx.clearrect (0,0,500,500);Ctx.beginpath ();Ctx.shadowcolor = "BLACK";Ctx.shadowblur = 5;Ctx.shadowoffsetx = 1;Ctx.shadowoffsety = 1;Ctx.linewidth = 2;var gradient = ctx.createradialgradient (250, 250, 1, 250, 250, 100);Gradient.addcolorstop (0, "#f5f5f5");Gradient.addcolorstop (1, "#dfdfdf");Ctx.fillstyle = gradient;Ctx.arc (0, 2 * Math.PI, true);Ctx.stroke ();Ctx.fill ();Ctx.shadowblur = 0;Ctx.shadowoffsetx = 0;ctx.shadowoffsety = 0;Ctx.strokestyle = "#333";Drawscale ();var date = new Date ();var ha = date.gethours () * + (Date.getminutes () * 6/12)-90;var ma = date.getminutes () * 6-90;var sa = date.getseconds () * 6-90;Drawpointer (N, Ha, 4, "#333");Drawpointer (N, MA, 3, "#777");Drawpointer (, SA, 2, "Red");Ctx.beginpath ();Ctx.fillstyle = "Red";Ctx.arc (Originx, originy, 2.5, 0, 2 * Math.PI, true);Ctx.fill ();}, 1000);function Drawpointer (radius,angle,width,color) {Ctx.linewidth = width;Ctx.strokestyle = color;Ctx.beginpath ();Ctx.moveto (Originx,originy);Ctx.lineto (Originx+radius*math.cos (angle*math.pi/180), Originy+radius*math.sin (angle*math.pi/180));Ctx.stroke (); }function Drawscale () {var dig = Math.pi/30; for (var i = 0; i <; i++) {var r = radius-6; var LW = 3; if (i% 5 = = 0) {r = radius-10; LW = 4; }ctx.linewidth = LW; Ctx.beginpath (); Ctx.moveto (originx + radius * MATH.COS (i * dig), Originy + radius * Math.sin (i * dig)); Ctx.lineto (Originx + R * Math.Cos (i * dig), Originy + R * Math.sin (i * dig)); Ctx.stroke (); }}</script>
HTML5 the canvas to make an electronic clock
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
