움직이는 그래픽 html5 시계 example_html5 튜토리얼 기술

이용 HTML5 제작 만들기

复主代码

代码如下:

<script><br> var Clock = 함수(캔버스, 옵션) {<br> this.canvas = canvas;<br> this.ctx = this.canvas.getContext("2d");<br> this.options = 옵션;<br> };</p> <p> Clock.prototype = {<br> 생성자: 시계,<br> drawCircle: function () {<br> var ctx = this.ctx;<br> ctx.StrokeStyle = "black";<br> ctx.arc(this .canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);<br> ctx.Stroke();<br> },<br> drawNum: 함수() {<br> var ctx = this.ctx;<br> var angle = Math.PI * 2 / 12;<br> for (var i = 1; i ctx .font = "20px Georgia";<br> ctx.textAlign = "center";<br> ctx.textBaseline = 'middle';<br> ctx.fillText(String(i), this.canvas.width / 2 수학 .cos(3 *Math.PI / 2 각도 * i) * 40, this.canvas.height / 2 Math.sin(3 * Math.PI / 2 각도 * i) * 40);<br> }<br> },<br> drawPointer: function () {<br> var ctx = this.ctx;<br> var that = this;<br> var 날짜, 시, 분, 초;<br> date = new Date() ;<br> 시간 = date.getHours();<br> if (시간 > 12) {<br> 시 = 시 % 12;<br> }<br> 분 = date.getMinutes();<br> 초 = date.getSeconds();</p> <p> var b = 분 * Math.PI / 30;<br> var c = 초 * Math.PI / 30;<br> var a = 시 * Math.PI / 6 Math.PI / 6 * 분 / 60;<br> var MinuteAngle = Math.PI * 2 / 3600;<br> var secondAngle = Math.PI * 2 / 60;<br> var hourAngle = Math.PI * 2 / 12 / 3600;</p> <p> ctx.beginPath();<br> ctx.save();<br> ctx.translate(that.canvas.width / 2, that.canvas.height / 2);<br> ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);<br> ctx.fill();<br> ctx.closePath();<br> ctx.beginPath();<br> a = hourAngle;<br> ctx.rotate(a);<br> ctx.fillRect(-2, -22, 4, 30);<br> ctx.closePath();<br> ctx.beginPath();<br> b = MinuteAngle; <br> ctx.rotate(b - a);<br> ctx.fillRect(-1.5, -26, 3, 35);<br> ctx.closePath();<br> ctx.beginPath();<br> c = secondAngle;<br> ctx.rotate(c - b);<br> ctx.fillRect(-1, -30, 2, 40);<br> ctx.closePath();<br> ctx.restore ();<br> },<br> rePaint: 함수 () {<br> this.drawPointer();<br> this.drawCircle();<br> this.drawNum();<br> },<br> tik: function () {<br> var that = this;<br> var ctx = this.ctx;<br> this.rePaint();<br> window.timer = setInterval(function () {<br> ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);<br> that.rePaint();<br> }, 1000);<br> }<br> };< /p> <p> var options;<br> var clock = new Clock(document.getElementById("canvas"), options);<br> clock.tik();<br> </script>

保存后使用浏览器运行，可以看到走动的圆shape时钟，大家试试看吧