[소개] 코드는 다음과 같습니다. 코드 복사 다음은 전체 코드입니다. html 파일로 저장하여 효과를 확인해 보세요. HTML5 시계 코드는 다음과 같습니다 코드 복사 다음은 전체 코드입니다. 효과를 보려면 html 파일을 사용하세요. HTML5 Clock-Ke LeyiKeleyi 원본 텍스트HTML5 시계 Ke Leyi는 Chrome, IE9, IE10, Firefox 등과 같이 HTML5를 지원하는 브라우저를 사용하도록 상기시킵니다. <br>var canvas = document.getElementById( 'canvas');<br>var ctx = canvas.getContext('2d');<br>if (ctx) {<br>var timeId;<br>var frameRate = 60;<br>function canvObject() { <br>this.x = 0;<br>this.y = 0;<br>this.rotation = 0;<br>this.borderWidth = 2;<br>this.borderColor = '#000000';<br>this.fill = false;<br>this.fillColor = '#ff0000';<br>this.update = function () {<br>if (!this.ctx) throw new Error('Ke Leyi 팁: 당신은 ctx 객체를 지정하지 않았습니다. ');<br>var ctx = this.ctx<br>ctx.save();<br>ctx.lineWidth = this.borderWidth;<br>ctx.StrokeStyle = this.borderColor; <br> ctx.fillStyle = this.fillColor;<br>ctx.translate(this.x, this.y);<br>if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180) ;<br>if (this.draw) this.draw(ctx);<br>if (this.fill) ctx.fill();<br>ctx.Stroke();<br>ctx.restore(); <br> }<br>};<br>function Line() { };<br>Line.prototype = new canvObject();<br>Line.prototype.fill = false;<br>Line.prototype.start = [0 , 0];<br>Line.prototype.end = [5, 5];<br>Line.prototype.draw = function (ctx) {<br>ctx.beginPath();<br>ctx. moveTo.apply(ctx, this.start);<br>ctx.lineTo.apply(ctx, this.end);<br>ctx.closePath();<br>};</p> <p>function Circle( ) { } ;<br>Circle.prototype = new canvObject();<br>Circle.prototype.draw = function (ctx) {<br>ctx.beginPath();<br>ctx.arc(0, 0, this.radius , 0, 2 * Math.PI, true);<br>ctx.closePath();<br>};</p> <p>var Circle = new Circle();<br>circle.ctx = ctx;<br>circle.x = 100;<br>circle.y = 100;<br>circle.radius = 90;<br>circle.fill = true;<br>circle.borderWidth = 6;<br> Circle.fillColor = '#ffffff';</p> <p>var hour = new Line();<br>hour.ctx = ctx;<br>hour.x = 100;<br>hour.y = 100; <br> hour.borderColor = "#000000";<br>hour.borderWidth = 10;<br>hour.rotation = 0;<br>hour.start = [0, 20];<br>hour.end = [0, -50];</p> <p>var 분 = new Line();<br>분.ctx = ctx;<br>분.x = 100;<br>분.y = 100;<br>분.borderColor = "#333333";<br>분.borderWidth = 7;<br>분.회전 = 0;<br>분.시작 = [0, 20];<br>분.end = [0 , -70 ];</p> <p>var 초 = new Line();<br>seconds.ctx = ctx;<br>seconds.x = 100;<br>seconds.y = 100;<br>초 .borderColor = "#ff0000";<br>seconds.borderWidth = 4;<br>seconds.rotation = 0;<br>seconds.start = [0, 20];<br>seconds.end = [0, - 80]; </p> <p>var center = new Circle();<br>center.ctx = ctx;<br>center.x = 100;<br>center.y = 100;<br>center.radius = 5; <br>center.fill = true;<br>center.borderColor = 'orange';</p> <p>for (var i = 0, ls = [], 캐시; i < 12; i++) {<br/>cache = ls[i] = new Line();<br/>cache.ctx = ctx;<br/>cache.x = 100;<br/>cache.y = 100;<br/>cache.borderColor = "주황색" ;<br/>cache.borderWidth = 2;<br/>cache.rotation = i * 30;<br/>cache.start = [0, -70];<br/>cache.end = [0, -80 ];<br/>}</p><p>timerId = setInterval(function () {<br/>// 캔버스 지우기<br/>ctx.clearRect(0, 0, 200, 200);<br/>// 배경색 채우기<br/>ctx.fillStyle = ' orange';<br/>ctx.fillRect(0, 0, 200, 200);<br/>// 다이얼<br/>circle.update();<br/>// Scale<br/>for (var i = 0; 캐시 = ls[i++]; ) 캐시.update();<br/>// 시침<br/>hour.rotation = (new Date()).getHours() * 30;<br/>hour.update(); <br/>// 분침<br/> Minute.rotation = (new Date()).getMinutes() * 6;<br/> Minute.update();<br/>// 초침<br/>seconds.rotation = (new Date ()).getSeconds() * 6;<br/>seconds.update();<br/>// 중앙 원<br/>center.update();<br/>}, (1000/frameRate) | );<br/>} else {<br/>alert('Ke Leyi 팁: 브라우저가 HTML5를 지원하지 않아 미리 볼 수 없습니다.');<br/>}<br/>