html5 시계 구현 사용 방법(코드 포함)

html5에 구현된 알람시계 코드를 활용하면 마음에 드는 친구들이 참고할 수 있습니다.

canvas>는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 사실 이 태그와 다른 태그도 같습니다. 특별한 점은 이 태그가 CanvasRenderingContext2D 객체를 얻을 수 있고 JavaScript 스크립트를 통해 그리기 위한 객체를 제어할 수 있다는 것입니다.

는 id, class, 스타일 및 기타 속성을 ​​추가하기 위한 컨테이너일 뿐입니다. 🎜>, 높이 및 너비 속성도 있습니다. > 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.

1. Canvas 개체인

DOM 개체 를 가져옵니다. 2. Canvas 개체의 getContext() 메서드를 호출하여 CanvasRenderingContext2D 개체를 가져옵니다.
3. 그리기를 위해 CanvasRenderingContext2D 개체를 호출합니다.

그래픽 변환

번역: context.translate(x,y), 수신 매개변수는 다음과 같습니다. 각각 원점은 x를 x축 방향으로, y를 y축 방향으로 이동합니다.

Scale: context.scale(x,y), 수신된 매개변수는 x 비율에 따라 스케일링할 x 좌표축과 y 좌표입니다. y 비율에 따라 축의 크기가 조정됩니다.

회전: context.rotate(angle), 수신된 매개변수는 좌표축의 회전 각도입니다.

그래픽을 변경한 후 다음 그림은 마지막

상태를 따르기 때문에 초기 상태로 돌아가려면 context save()를 사용해야 합니다. ; 및 context.restore(); 현재 상태를 저장하고 복원하려면:

JavaScript 코드클립보드에 콘텐츠 복사

🎜>

var canvas = document.getElementById("canvas");   
var context = canvas.getContext("2d");   
//translate() 
context.save();   
context.fillStyle = "#1424DE";   
context.translate(10,10);   
context.fillRect(0,0,200,200);   
context.restore();   
//scale() 
context.save();   
context.fillStyle = "#F5270B";   
context.scale(0.5,0.5);   
context.fillRect(500,50,200,200);   
context.restore();   
//rotate() 
context.save();   
context.fillStyle = "#18EB0F";   
context.rotate(Math.PI / 4);   
context.fillRect(300,10,200,200);   
context.restore();

효과는 다음과 같습니다.

또 하나 그래픽 변환과 관련된 것은 행렬 변환: context.transform(a, b, c, d, e, f, g)입니다. 매개변수의 의미는 다음과 같습니다.

a 수평 스케일링(기본값은 1)

b 수평 기울기(기본값은 0)

c 수직 기울기(기본값은 0)
d 수직 스케일링(기본값은 0 1)
e 수평 변위(기본값은 0)
f 수직 변위(기본값은 0)

독자는 각 매개변수의 효과를 스스로 확인할 수 있지만 나는 이에 대해 설명하지 않습니다. 여기에서 하나씩 소개해주세요.

위 내용은 html5 시계 구현 사용 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!