Canvas clock of HTML5 (webpage effect-1 more per day), html5canvas

Canvas clock of HTML5 (webpage effect-1 more per day), html5canvas

Today, the dynamic clock effect is achieved using the Canvas label in HTML5.

Not much said, first look at the effect: http://webfront.verynet.cc/pc/canvas-clock.html

 

As we all know, the Canvas tag is the soul of HTML5, And the HTML5 Canvas is a real-time bitmap area on the screen controlled by JavaScript. Real-time mode refers to the method of rendering pixels on the canvas,

HTML5 Canvas uses JavaScript to call CanvasAPI and completely redraws the bitmap on the screen at each frame. The following code describes the details.

 

HTML Structure Code:

1 <canvas id = "canvas" width = "500" height = "500"> 2. Your browser does not support the Canavas tag. Please upgrade your browser and check this page again! 3 </canvas>

CSS style code:

1     <style type="text/css">2         *{margin:0px;padding:0px;}3         .canvasbox{margin:50px auto;background:#dadada;width:500px;}4     </style>

JS script code:

1 <script type = "text/javascript"> 2 var canvas = document. getElementById ("canvas"); 3 // obtain the 2d context object of the Canvas. 4 var context = canvas. getContext ("2d"); 5 6 // define an initialization function 7 function init () {8 // first clear all the images on the canvas 9 context. clearRect (500,500,); 10 11 // obtain the system time 12 var date = new Date (); 13 var hours = date. getHours (); 14 // because the clock is in 12-hour format, 15 hours = hours> 12 must be controlled on the time degree? Hours-12: hours; 16 var minutes = date. getMinutes (); 17 var seconds = date. getSeconds (); 18 19 // start to draw the dial 20 context. beginPath (); 21 // draw a circle 22 context at 250,250 in the center of the canvas. arc (250,250,200, 0,360, false); 23 // defines the width of the paint brush 24 context. lineWidth = 10; 25 // define the paint brush color 26 context. strokeStyle = "#000"; 27 // close the painting path 28 context. closePath (); 29 // color 30 context. stroke (); 31 32 // start to draw the scale 33 // moment degree 34 for (var h = 0; h <12; h ++) {35 // Save the image 36 context first. save (); 37 context. lineWidth = 8; 38 context. strokeStyle = "# f00"; 39 // defines the rotation center point 40 context. translate (250,250); 41 // defines the Rotation Angle 42 context. rotate (h * 30 * Math. (PI/180); 43 context. beginPath (); 44 context. moveTo (0,190); 45 context. lineTo (0,170); 46 context. closePath (); 47 context. stroke (); 48 // display the previously saved image to form a new image 49 context. restore (); 50} 51 // score 52 for (var m = 0; m <60; m ++) {53 context. save (); 54 context. lineWidth = 4; 55 context. strokeStyle = "red"; 56 context. translate (250,250); 57 context. rotate (m * 6 * Math. (PI/180); 58 context. beginPath (); 59 context. VPC: moveTo (0,190); 60 context. lineTo (0,180); 61 context. closePath (); 62 context. stroke (); 63 context. restore (); 64} 65 66 // specifies 67 context for the hour hand. save (); 68 context. lineWidth = 8; 69 context. strokeStyle = "#000"; 70 context. translate (250,250); 71 context. rotate (hours * 30 * Math. PI/180); 72 context. beginPath (); 73 context. moveTo (0, 10); 74 context. lineTo (0,-100); 75 context. closePath (); 76 context. stroke (); 77 context. restore (); 78 79 // draw a sub-needle 80 context. save (); 81 context. lineWidth = 4; 82 context. strokeStyle = "#000"; 83 context. translate (250,250); 84 context. rotate (minutes * 6 * Math. (PI/180); 85 context. beginPath (); 86 context. moveTo (0, 10); 87 context. lineTo (0,-140); 88 context. closePath (); 89 context. stroke (); 90 context. restore (); 91 92 // draw seconds 93 context. save (); 94 context. lineWidth = 2; 95 context. strokeStyle = "blue"; 96 context. translate (250,250); 97 context. rotate (seconds * 6 * Math. (PI/180); 98 context. beginPath (); 99 context. moveTo (0, 10); 100 context. lineTo (0,-170); 101 context. closePath (); 102 context. stroke (); 103 context. restore (); 104} 105 // call the timer to refresh and refresh the new image every second. 106 setInterval (init, 1000); 107 </script>

 

There is a small BUG. When the Painting time degree and the score scale, if the color is not a moment, there will be overlap, because after the painting time degree, then draw the score scale, therefore, xiaobian sets the two scales to the same color to avoid this phenomenon. Of course, you can also proceed with the processing through judgment, and the small editor will not proceed here.

When browsing this effect, use a browser that supports HTML5 to avoid affecting the browsing effect.

Enjoy Code, life, and Web page effects.

Html5 two canvas overlapping put in a div, each canvas fill in an image, how to write the code?

Specify the postion: absolution of the two canvas, and set the left and top attributes of the two canvas. It is recommended that you put a small canvas on it, the method is to set the z-index of the two canvas to different values, and the value is greater than above.
For the drawing process, refer to the code below:
Var mycanvas = document. getElementByIdx_x_x_x ("mycanvas ");
Var context = mycanvas. getContext ("2d ");
Var imageObj = new Image ();
ImageObj. onload = function (){

// Draw cropped image
Var sourcex= 350;
Var sourceY = 50;
Var sourceWidth = 350;
Var sourceHeight = 350;
Var destWidth = sourceWidth;
Var destHeight = sourceHeight;
Var destX = mycanvas. width/2-destWidth/2;
Var destY = mycanvas. height/2-destHeight/2;
Context. drawImage (imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight );
 
Canvas confusions in html5

Canvas is equivalent to an image, and the attribute set by css is equivalent to stretching the image. This method should be used to change the size of the canvas.
<Canvas width = 500 height = 400> </canvas>
The corresponding javascript is
Canvas = document. getElementsByTagName ('canvas ') [0];
Canvas. width = 500;
Canvas. height = 400;

In other words, the 1px line you draw is actually displayed in the default size after stretching and transformation.