design sketch

|

Update log

1. The first parameter of the construction method supports passing in the id of the canvas dom object. You can pass either the canvas dom object or the id of this dom object.
2. setOptions method is added to facilitate dynamic updating of analog clock properties.
3. Fix the BUG that the passed in options does not verify the attribute value. If some attributes of the passed in options are undefined, filter out the attribute.
4. options: handType pointer type is added. There are two optional values: line or triangle. The default is triangle

1. Installation

• The < script > tag introduces "dist/clock.js" or "dist/clock.min.js"

• Using npm, run the command: npm install - d reason clock

2. Examples

2.1 simplest use

• code

//Method 1: pass in the canvas dom object
new Clock(document.getElementById("canvas")).run();

//Method 2: pass in the id of the canvas dom object
new Clock("canvas").run();

• effect
  
  

  

2.2 display Roman numerals

• code

new Clock(document.getElementById("canvas"), {scaleType: "roman"}).run();

• effect
  
  
  

2.3 customize border color, background color, tick mark color and hour number color

• code

new Clock(
    document.getElementById("canvas"),
    {
        borderColor: "brown",//Border color
        backgroundColor:"black",//Dial background color
        hourColor:"white",//Hour number color
        scaleColor:"yellow"//Tick mark color
    }
).run();

• effect
  
  
  

2.4 custom border picture and background picture

• Code 1

new Clock(
    document.getElementById("canvas"),
    {
        borderImage: "./img/border.png",
        backgroundImage: "./img/bg.jpg"
    }
).run();
```http://www.biyezuopin.vip
* Code 2 using remote pictures
```javascript
new Clock(
    document.getElementById("canvas"),
    {
        borderImage: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553805386&di=ec656215a2958d617ef30631e96304e0&imgtype=0&src=http%3A%2F%2Fimg1.ali213.net%2Fshouyou%2Fupload%2Fimage%2F2018%2F07%2F09%2F584_2018070952816881.png",
        backgroundImage: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545553773235&di=1c768f80fc088c2edc20fa75af77c515&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F03%2F20160703164252_2WySB.jpeg"
    }
).run();

• effect
  
  

  

3. Parameters

3.1 Clock(canvas, options)

• canvas: container used to display analog clock. It can be an HTMLCanvasElement object or the id of an HTMLCanvasElement object.

• Options: options has a default value and can't be passed on, but if you want to customize some beautiful styles, you can use the options parameter.

3.2 options default

attribute	explain	type	Default value
size	Analog clock size	Number	300
padding	padding	Number	5
borderWidth	Border width	Number	15
borderColor	Border color	String	black
borderImage	Border background picture, with priority over borderColor	String	-
backgroundColor	Background color	String	white
backgroundImage	Background picture, with priority over backgroundColor	String	-
backgroundMode	Background image display mode, with optional values of part or full	String	full
backgroundAlpha	Transparency of background picture	Number	0.5
scaleType	Scale type displayed, roman: roman numeral, arabic: arabic numeral, none: not displayed	String	arabic
scaleColor	Tick mark color	String	#666
hourColor	Scale value color	String	#666
handType	Pointer type	line | triangle	triangle
secondHandColor	Second hand color	String	red
minuteHandColor	Minute hand color	String	#666
hourHandColor	Clock color	String	black
showShadow	Clock color	Boolean	true
onload	After the picture is loaded, the callback parameter is the current Clock object	Function	-

4. Object method

• show(time): used to display a time. It can be a Date object or a string like "hh:mm:ss". The return value of this method is the current object. For example:

//1. If you do not use the background or border map, you can directly use the show method
new Clock(document.getElementById("canvas")).show("15:25:40");

//2. If the background image or border image is used, you need to use the show method in the onload callback method
new Clock(
    document.getElementById("canvas"),
    {
        borderImage: "./img/border.png",
        backgroundImage: "./img/bg.jpg",
        onload(clock) {
            clock.show("15:25:40")
        }
    }
);

http://www.biyezuopin.vip

• run(): when this method is executed, the simulation clock will render the interface every 1 second, and the return value of this method is the current object. For example:

new Clock(document.getElementById("canvas")).run();

• stop(): execute this method to stop rendering the interface every 1 second. For example:

//Run an analog clock and stop after 4 seconds
var clock = new Clock(document.getElementById("canvas")).run();
setTimeout(function(){
    clock.stop();
}, 4000);

• setOptions(options): execute this method to dynamically change some properties of the analog clock. For example:

//Run an analog clock and modify the size of the analog clock to 500 after 4 seconds. Refer to demo / demo2 html
var clock = new Clock(document.getElementById("canvas")).run();
setTimeout(function(){
    clock.setOptions({size: 500});
}, 4000);