먼저 입자 시계의 효과를 다음과 같이 살펴보겠습니다.
아래에서는 Canvas와 JS를 통해 구현해보겠습니다.
먼저 다음과 같이 html 파일을 생성하고 캔버스를 추가합니다.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>문서</title> <style> .container{ 여백: 0, 너비: 600px } </style; ></head><body> <div id=container> <canvas id=canvas></canvas> </div></body>다음으로 digit.js라는 자료를 가져옵니다. 자료는 2차원 배열을 사용하여 다음과 같이 0~9 및 콜론 총 10개의 문자로 구성됩니다.
문자 1이 다음과 같이 구성되어 있음을 알 수 있습니다.
캔버스 만들기를 시작해 보겠습니다.
function Clock() { var canvas = document.getElementById(canvas); canvas.height = 100; this.cxt = canvas.getContext('2d'); .cxt.fillRect(0, 0, 500, 100);위의 코드는 브라우저에 작은 회색 캔버스를 그릴 수 있습니다
아래에서 분석을 시작하겠습니다.
1. 데이터 매트릭스를 이해하시나요? 다차원 배열이다
2. 원을 그리는 방법은 무엇입니까?
2.1 먼저 반경을 알아야 합니까?
위 그림에서 볼 수 있듯이 원의 중심 위치는 다음과 같습니다.
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2. . . r+1 + (r+1)*2*i
동시에 다음과 같이 원의 높이를 계산하여 반경을 얻을 수도 있습니다.
원의 높이는 (r+1)*2이고, 캔버스의 높이는 10개의 원으로 구성됩니다.
캔버스 높이 = (r+1)*2*10
캔버스 높이를 100으로 설정하면 r이 나타나고 원 중심 xy도 나타나며 원이 그려지기 시작합니다.
먼저 위의 Clock 개체에 명령문을 추가하여 r을 계산합니다.
this.r = 100/20-1;
다음으로 Clock 프로토타입에 그리기 메서드를 추가합니다.
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (let j=0; j< 숫자[숫자][i].length; j++) { if (숫자[숫자][i][j] == 1) { this.cxt.beginPath(); this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false); this.cxt.closePath();draw는 2개의 매개변수를 받습니다. 첫 번째는 문자 인덱스이고, 두 번째는 문자 오프셋 시퀀스이며, 70은 오프셋 거리이며 사용자 정의할 수 있습니다.
첫 번째 for는 렌더링할 문자 배열을 가져옵니다. 두 번째 for는 렌더링할 각 줄을 가져와서 1로만 렌더링합니다. 원을 그리는 데 필요한 매개 변수는 주로 x, y, r입니다.
다음으로, 다음과 같이 일반 규칙을 사용하여 새 Date에서 시간을 직접 가져올 수 있습니다.
Clock.prototype.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); var data = []; data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); i=0; i<data.length; i++) { this.draw(data[i], i) }정규식을 통해 시간, 분, 초를 쉽게 얻을 수 있습니다. 배열을 푸시할 때 해당 형식에 주의하세요. 10은 digit.js의 10번째 문자인 콜론을 나타냅니다.
이렇게 페인팅하면 캔버스를 새로 고칠 수 없다는 문제가 있으므로 이를 추가할 수 있습니다.
캔버스.높이= 100
이제 다음과 같이 코드를 실행할 수 있습니다.
var clock = new Clock();setInterval(()=>{ clock.getTime(); })알았어, 괜찮아
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.