動くグラフィック html5 時計の例_html5 チュートリアル スキル

HTML5使用時钟

复制代码

代码如下:

<script><br> var Clock = function (canvas, options) {<br> this.canvas = Canvas;<br> this.ctx = this.canvas.getContext("2d");<br> this.options = オプション;<br> };</p> <p> Clock.prototype = {<br> コンストラクター: Clock,<br>drawCircle: function () {<br> var ctx = this.ctx;<br> ctx.bloodStyle = "black";<br> ctx.arc(this .canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);<br> ctx.ストローク();<br> },<br>drawNum: function () {<br> var ctx = this.ctx;<br> var angle = Math.PI * 2 / 12;<br> for (var i = 1; i ctx .font = "20px ジョージア";<br> ctx.textAlign = "center";<br> ctx.textBaseline = 'middle';<br> ctx.fillText(String(i), this.canvas.width / 2 Math .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 date, 時, 分, 秒;<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 minutesAngle = Math.PI * 2 / 3600;<br> var SecondAngle = Math.PI * 2 / 60;<br> varhourAngle = Math.PI * 2 / 12 / 3600; <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 = 分角度; <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: function () {<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>

保存後使用浏览器运行，可以看运行的圆形時間钟，大家试试看吧