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

이용 HTML5 제작 만들기

复主代码

代码如下:

캔버스>

<script><br /> var Clock = 함수(캔버스, 옵션) {<br /> this.canvas = canvas;<br /> this.ctx = this.canvas.getContext("2d");<br /> this.options = 옵션;<br /> };</script>

Clock.prototype = {
생성자: 시계,
drawCircle: function () {
var ctx = this.ctx;
ctx.StrokeStyle = "black";
ctx.arc(this .canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);
ctx.Stroke();
},
drawNum: 함수() {
var ctx = this.ctx;
var angle = Math.PI * 2 / 12;
for (var i = 1; i ctx .font = "20px Georgia";
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
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);
}
},
drawPointer: function () {
var ctx = this.ctx;
var that = this;
var 날짜, 시, 분, 초;
date = new Date() ;
시간 = date.getHours();
if (시간 > 12) {
시 = 시 % 12;
}
분 = date.getMinutes();
초 = date.getSeconds();

var b = 분 * Math.PI / 30;
var c = 초 * Math.PI / 30;
var a = 시 * Math.PI / 6 Math.PI / 6 * 분 / 60;
var MinuteAngle = Math.PI * 2 / 3600;
var secondAngle = Math.PI * 2 / 60;
var hourAngle = Math.PI * 2 / 12 / 3600;

ctx.beginPath();
ctx.save();
ctx.translate(that.canvas.width / 2, that.canvas.height / 2);
ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
a = hourAngle;
ctx.rotate(a);
ctx.fillRect(-2, -22, 4, 30);
ctx.closePath();
ctx.beginPath();
b = MinuteAngle;
ctx.rotate(b - a);
ctx.fillRect(-1.5, -26, 3, 35);
ctx.closePath();
ctx.beginPath();
c = secondAngle;
ctx.rotate(c - b);
ctx.fillRect(-1, -30, 2, 40);
ctx.closePath();
ctx.restore ();
},
rePaint: 함수 () {
this.drawPointer();
this.drawCircle();
this.drawNum();
},
tik: function () {
var that = this;
var ctx = this.ctx;
this.rePaint();
window.timer = setInterval(function () {
ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
that.rePaint();
}, 1000);
}
};

var options;
var clock = new Clock(document.getElementById("canvas"), options);
clock.tik();

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