Add a clock in the bulletin board of the blog garden custom in the blog garden-use canvas to draw a clock and canvas on the bulletin board

Add a clock in the bulletin board of the blog garden custom in the blog garden-use canvas to draw a clock and canvas on the bulletin board
Preface

I have been learning front-end knowledge recently. I am very grateful to the lecturer of MOOC, Silva Zhou and w3school, for helping me quickly learn a skill. Today I learned how to use canvas to draw a clock, do not spray.

For canvas, w3shcool is described as follows:

HTML5 <canvas> labels are used to draw images (using scripts, usually JavaScript ).

However, the <canvas> element itself is not capable of drawing (it is just a graphical container)-you must use a script to complete the actual drawing task.

The getContext () method returns an object that provides methods and attributes for drawing on the canvas.

Example

This example is shown in the announcement board,

Currently, there are a lot of canvas clock dome on the Internet, as shown below: <! DOCTYPE html>

 

　

Js Code

Var dom = document. getElementById ('clock '); var ctx = dom. getContext ('2d '); var width = ctx. canvas. width; var height = ctx. canvas. height; var r = width/2; // defines the function drawBackground () {ctx. save (); ctx. translate (r, r); ctx. beginPath (); ctx. lineWidth = 10; ctx. font = '18px arial'; ctx. textAlign = 'center' ctx. textBaseline = 'middle' ctx. arc (0, 0, R-5, 0, 2 * Math. PI, false); ctx. stroke (); var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; // obtain the coordinate hourNumbers through traversal. forEach (function (number, I) {var rad = 2 * Math. PI/12 * I; var x = Math. cos (rad) * (r-30); var y = Math. sin (rad) * (r-30); ctx. fillText (number, x, y) ;}// defines the scale for (var I = 0; I <60; I ++) {var rad = 2 * Math. PI/60 * I; var x = Math. cos (rad) * (r-18); var y = Math. sin (rad) * (r-18); ctx. beginPath (); if (I % 5 = 0) {ctx. arc (x, y, 2, 0, 2 * Math. PI, false); ctx. fillStyle = '# 000';} else {ctx. arc (x, y, 2, 0, 2 * Math. PI, false); ctx. fillStyle = '# ccc';} ctx. fill () ;}// defines the clock function drawHour (hour, minute) {ctx. save (); ctx. beginPath (); var rad = 2 * Math. PI/12 * hour; var mrad = 2 * Math. PI/12/60 * minute; ctx. rotate (rad + mrad); ctx. lineWidth = 6; ctx. lineCap = 'round '; ctx. moveTo (0, 10); ctx. lineTo (0,-r/2); ctx. stroke (); ctx. restore ();} // defines the minute function drawMinute (minute, second) {ctx. save (); ctx. beginPath (); var rad = 2 * Math. PI/60 * minute; var srad = 2 * Math. PI/60/60 * second; ctx. rotate (rad + srad); ctx. lineWidth = 3; ctx. lineCap = 'round '; ctx. moveTo (0, 10); ctx. lineTo (0,-r + 18); ctx. stroke (); ctx. restore ();} // defines the second function drawSecond (second) {ctx. save (); ctx. beginPath (); var rad = 2 * Math. PI/60 * second; ctx. rotate (rad); ctx. lineWidth = 3; ctx. lineCap = 'round '; ctx. moveTo (-2, 20); ctx. lineTo (2, 20); ctx. lineTo (1,-r + 18); ctx. lineTo (-1,-r + 18); ctx. fillStyle = '# c14543'; ctx. fill (); ctx. restore () ;}// defines the dot Style function drawDot () {ctx. beginPath (); ctx. fillStyle = '# fff'; ctx. arc (0, 0, 3, 0, 2 * Math. PI, false); ctx. fill ();} // time function draw () {ctx. clearRect (0, 0, width, height); var now = new Date (); var hour = now. getHours (); var minute = now. getMinutes (); var second = now. getSeconds (); drawBackground (); drawHour (hour, minute); drawMinute (minute, second); drawSecond (second); drawDot (); ctx. restore ();} setInterval (draw, 1000 );

Note: 1. <canvas> it is best not to use CSS to define the length of a label.

2. The function sequence in js cannot be messy. Otherwise, the function will be cleared without any effect.

3. the height and width in the Code are specific px values, and the canvas size will affect the appearance of the clock (solution: Set a proportional variable whose value is width/200, replace the height and width with variable values ).

2. Add a style to the blog Board

This step is very simple,

1. You must first apply for JS permissions on the announcement board.

2. upload your JS file to the blog file and get the address. The following is the address in my file. (You can use it directly)

　　　　http://files.cnblogs.com/files/lixu880/canvas.js

3. paste the following code into the blog sidebar announcement.

<Div class = "clockdiv"> <canvas id = "clock" width = "200px" height = "200px"> your browser is not compatible with canvas </canvas> <div>
<Script type = "text/javascript" src = "http://files.cnblogs.com/files/lixu880/canvas.js"> </script>

4. paste the following code into the page to customize the CSS code. (Add a DIV to center the clock in the bulletin board of different blog styles)

.clockdiv{    text-align: center;}

5. Customize your style to make it personalized

Remarks

 

I hope you can build your favorite personalized blog.