캔버스 기반의 15가지 다양한 모양의 시계 js 플러그인

간략한 튜토리얼

CanvasClock은 Canvas를 기반으로 하는 순수 js 시계 플러그인입니다. 이 js 시계 플러그인은 매개변수를 구성하여 15가지 다른 모양의 시계를 생성할 수 있습니다. 순수 js를 사용하여 만들어졌으며 CSS 코드나 외부 종속성을 사용하지 않습니다.

사용방법

페이지에 canvas_clock.js 파일을 소개합니다.

<script type="text/javascript" src="js/canvas_clock.js"></script>

HTML 구조

는 HTML5 요소를 시계의 컨테이너로 사용합니다.

<canvas id="demo" width="200px" height="200px"></canvas>

초기화 플러그인

다음 방법을 통해 기본 시계를 생성할 수 있습니다.

clock = {};

생성 시 구성 매개변수를 전달할 수도 있습니다.

clock = {
   
  // shows indicators
  "indicate": true/false,
 
  // color of the indicaters
  "indicate_color": "#aabbcc",
 
  // color of the seconds dial
  "dial1_color": "#aabbcc",
 
  // color of the minutes dial
  "dial2_color": "#aabbcc",
 
  // color of the hour dial
  "dial3_color": "#aabbcc",
 
  // shows the time as well using text
  "time_add": 1/2/3/4,
 
  // the color of the text time
  "time_add_color": "#aabbcc",
 
  // use 24 hour notation
  "time_24h": true/false,
 
  // modify the time by adding or subtracting seconds to the time
  "timeoffset":0,
 
  // show the date as well using text
  "date_add": 1/2/3/4/5,
 
  // the color of the date text
  "date_add_color": "#aabbcc",
 
  // the background color
  "bg_color":"#fff",
 
  // the opacity of the background image if shown
  "bg_opacity": 0.0-1.0,
 
};

그런 다음 ID로 요소에 대한 컨텍스트 참조를 얻은 다음 모양을 지정하는 시계 생성자를 사용하여 시계를 렌더링할 수 있습니다. 예:

context = document.getElementById('clock1_').getContext('2d')
clock_conti(context, 200, object);

사용 가능한 시계는 다음과 같습니다.

• clock_conti

• clock_digital

• 시계_표준

• 시계추종

• 시계_서클

• 시계_성장

• 시계_점

• 시계_번호

• 시계_랜덤

• 시계_디지털란

• 시계 막대

• 시계 행성

• 시계 룰렛

• 시계 역

• clock_binary

  위는 캔버스 기반의 서로 다른 15가지 시계 js 플러그인의 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php. CN)!