나는 전에 html5에서 캔버스 요소를 배웠고, 내 손을 연습하기 위해 간단한 시계를 깨달았습니다. 시계 자체는 복잡하지 않으며 그림을 사용하여 아름답게하지 않습니다. 그러나 참새는 작지만 아래에서 여러분과 공유하겠습니다.
데모 효과 :
HTML 코드 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 시계 </title>
<스타일 유형 = "텍스트/CSS">
*{
여백 : 0;
패딩 : 0;
}
.캔버스{
마진 왼쪽 : 20px;
마진-탑 : 20px;
국경 : 단단한 1px;
}
</스타일>
</head>
<body onload = "main ()">
<canvas class = "canvas"id = "canvasid"width = '500px'height = '400px'> </canvas>
<script type = "text/javaScript"src = "clock.js"> </script>
</body>
</html>
JS 코드 :
코드 사본은 다음과 같습니다.
var canvas = {};
canvas.cxt = document.getElementById ( 'canvasid'). getContext ( '2d');
canvas.point = function (x, y) {
this.x = x;
this.y = y;
};
/* 캔버스의 모든 그래픽을 지우십시오*/
canvas.clearCxt = function () {
var me = 이것;
var canvas = me.cxt.canvas;
me.cxt.clearRect (0,0, Canvas.OffSetWidth, Canvas.OffSetheight);
};
/*시계*/
canvas.clock = function () {
var me = 캔버스,
c = me.cxt,
반경 = 150, /*반경* /
스케일 = 20, /*스케일 길이* /
minangle = (1/30)*Math.pi,/*1 분의 광선*/
Hourangle = (1/6)*Math.pi,/*1 시간의 광선*/
Hourhandlength = RADIUS/2,/*시간 핸드 길이*/
minhandlength = RADIUS/3*2,/*분 핸드 길이*/
Sechandlength = RADIUS/10*9,/*중고 길이*/
CENTRE = NEW ME.POINT (C.CANVAS.WIDTH/2, C.CANVAS.HEIGHT/2); /*원의 중심*/
/*원의 중앙 (다이얼 중앙)을 그리십시오*/
함수 drawCenter () {
c.save ();
C.Translate (Center.x, Center.y);
c.fillstyle = 'black';
c.beginpath ();
C.ARC (0, 0, 반경/20, 0, 2*Math.pi);
C.closepath ();
c.fill ();
C.Stroke ();
C.Restore ();
};
/*좌표 변환을 통해 시계 얼굴을 그리십시오*/
함수 단점 () {
c.save ();
C.Translate (Center.x, Center.y); /*번역 변환*/
/*드로우 스케일*/
함수 drawScale () {
C.MOVETO (반경 - 스케일, 0);
C.Lineto (반경, 0);
};
c.beginpath ();
C.ARC (0, 0, 반경, 0, 2*Math.Pi, True);
C.closepath ();
for (var i = 1; i <= 12; i ++) {
DrawScale ();
c.rotate (Hourange); /*회전 변환*/
};
/*드로잉 시간 (3,6,9,12)*/
c.font = "Bold 30px Impack"
C.FillText ( "3", 110, 10);
C.FillText ( "6", -7, 120);
C.FillText ( "9", -120, 10);
C.FillText ( "12", -16, -100);
C.Stroke ();
C.Restore ();
};
/*시간 손을 그리십시오 (H : 현재 시간 (24 시간 시스템)*/
this.drawhourhand = function (h) {
h = h === 0? 24 : H;
c.save ();
C.Translate (Center.x, Center.y);
c.rotate (3/2*math.pi);
c.rotate (H*HourAngle);
c.beginpath ();
C.MOVETO (0, 0);
C.Lineto (HourHandlength, 0);
C.Stroke ();
C.Restore ();
};
/*미세한 손 (m : 현재 분)*/
this.drawminhand = function (m) {
m = m === 0? 60 : M;
c.save ();
C.Translate (Center.x, Center.y);
c.rotate (3/2*math.pi);
c.rotate (m*minangle);
c.beginpath ();
C.MOVETO (0, 0);
C.Lineto (Minhandlength, 0);
C.Stroke ();
C.Restore ();
};
/*초침을 그리십시오 (S : 현재 두 번째)*/
this.drawSechand = function (s) {
s = s === 0? 60 : S;
c.save ();
C.Translate (Center.x, Center.y);
c.rotate (3/2*math.pi);
c.rotate (s*minangle);
c.beginpath ();
C.MOVETO (0, 0);
C.Lineto (Sechandlength, 0);
C.Stroke ();
C.Restore ();
};
/*현지 시간에 따라 시계를 그리십시오*/
this.drawclock = function () {
var me = 이것;
함수 draw () {
var date = 새 날짜 ();
canvas.clearCxt ();
단점 ();
DrawCenter ();
me.DrawHourhand (date.gethours () + date.getMinutes ()/60);
me.DrawMinHand (date.getMinutes () + date.getSeconds ()/60);
me.DrawSechand (date.getSeconds ());
}
그리다();
setInterval (draw, 1000);
};
};
var main = function () {
var clock = new canvas.clock ();
clock.drawclock ();
};
일부 간단한 캔버스 요소 API가 코드에 관여합니다. 그냥 휴식을 취하십시오
위는이 기사에 관한 것입니다. 모든 사람이 캔버스를 배우는 것이 도움이되기를 바랍니다.