Comments: In this article, I will write an html5 clock application trial which mainly sets the translate and ratate of the coordinate transformation, as well as the path drawing of the html5 Canvas, beginPath, closePath, rect, there are many issues such as arc. If you need code directly, you can refer to the html5 Canvas in the previous article, try to write an html5 clock application. Here we mainly set the translate and ratate of coordinate transformations, as well as path plotting of html5 Canvas, beginPath, closePath, rect, and arc, there is also an important mechanism for saving and restoring the drawing status of html5 Canvas path drawing, such as save and restore.
If you don't want to talk about it, you can directly access the Code. If you have any questions, you are welcome to ask questions and give me suggestions.
Ff:
Code:
The Code is as follows:
<Html>
<Head>
</Head>
<Body>
<Canvas id = "myCanvas" width = "600" height = "300"> your browser does not support it yet </canvas>
<Script type = "text/javascript">
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("2d ");
Var slen = 60;
Var mlen = 50;
Var hlen = 40;
Cxt. strokeRect (0, 0, c. width, c. height );
Cxt. beginPath ();
Cxt. strokeStyle = "# 00f ";
Cxt. fillStyle = "# 00f ";
Cxt. arc (200,150, 5, 0, 2 * Math. PI, true );
Cxt. fill ();
Cxt. closePath ();
Cxt. beginPath ();
Cxt. strokeStyle = "# 00f ";
Cxt. arc (200,150,100, 0, 2 * Math. PI, true );
Cxt. stroke ();
Cxt. closePath ();
Cxt. beginPath ();
Cxt. translate (200,150); // translation origin;
Cxt. rotate (-Math. PI/2 );
Cxt. save ();
For (var I = 0; I <60; I ++ ){
If (I % 5 = 0 ){
// Cxt. fillStyle = "# ff0000 ";
Cxt. fillRect (80, 0, 20, 5 );
Cxt. fillText ("" + (I/5 = 0? 12: I/5), 70, 0 );
} Else {
// Cxt. strokeStyle = "# 00f ";
Cxt. fillRect (90, 0, 10, 2 );
}
// Document. getElementById ("div1"). innerText + = "" + I;
Cxt. rotate (Math. PI/30 );
}
Cxt. closePath ();
Var ls = 0, lm = 0, lh = 0;
Function Refresh (){
Cxt. restore ();
Cxt. save ();
Cxt. rotate (ls * Math. PI/30 );
Cxt. clearRect (5,-1, slen + 1, 2 + 2 );
Cxt. restore (); cxt. save ();
Cxt. rotate (lm * Math. PI/30 );
Cxt. clearRect (5,-1, mlen + 1, 3 + 2 );
Cxt. restore (); cxt. save ();
Cxt. rotate (lh * Math. PI/6 );
Cxt. clearRect (5,-3, hlen + 1, 4 + 2 );
Var time = new Date ();
Var s = ls = time. getSeconds ();
Var m = lm = time. getMinutes ();
Var h = lh = time. getHours ();
Cxt. restore ();
Cxt. save ();
Cxt. rotate (s * Math. PI/30 );
Cxt. fillRect (5, 0, slen, 2 );
Cxt. restore (); cxt. save ();
Cxt. rotate (m * Math. PI/30 );
Cxt. fillRect (5, 0, mlen, 3 );
Cxt. restore (); cxt. save ();
Cxt. rotate (h * Math. PI/6 );
Cxt. fillRect (5,-2, hlen, 4 );
}
Var MyInterval = setInterval ("Refresh ();", 1000 );
</Script>
<Div id = "div1" style = "background: # 00f;"> </div>
</Body>
</Html>
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
