HTML 5学習記録---canvas学習の時計
3887 ワード
canvas ，
。js ：170798851 gitプロジェクトアドレス:https://github.com/Jonavin/HTML5_Study
/**
* Created by Administrator on 2014-11-22.
*/
(function(win){
var doc = win.document,cvs = doc.getElementById("canvas"),ctx = cvs.getContext("2d"),
WIDTH = cvs.width,HEIGHT = cvs.height,
FONT_HEIGHT=3,MARGIN=160,HAND_TRUNCATION = WIDTH/10,
HOUR_HAND_TRUNCTION = WIDTH/10,NUMERAL_SPACING = 20,
RADIUS = WIDTH/2-MARGIN,HAND_RADIUS=RADIUS+NUMERAL_SPACING,
numerals = [1,2,3,4,5,6,7,8,9,10,11,12];
/**
*
* @type {{}}
*/
var _functions = {
//
drawCircle:function(){
ctx.beginPath();//
ctx.arc(WIDTH/2,HEIGHT/2,RADIUS,0,Math.PI*2,true);
ctx.stroke();
},
//
drawNumerals:function(){
var angle = 0,numeralWidth = 0;
numerals.forEach(function(numeral){
angle = Math.PI/6*(numeral-3);
numeralWidth = ctx.measureText(numeral).width;
ctx.fillText(numeral,WIDTH/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,HEIGHT/2+Math.sin(angle)+(HAND_RADIUS)+FONT_HEIGHT/3);
});
},
//
drawCenter:function(){
ctx.beginPath();
ctx.arc(WIDTH/2,HEIGHT/2,5,0,Math.PI*2,true);
ctx.fill();//
},
//
drawHand:function(loc,isHour){
var angle = (Math.PI*2)*(loc/60)-Math.PI/ 2,
handRadius = isHour?RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCTION:RADIUS-HAND_RADIUS;
ctx.moveTo(WIDTH/2,HEIGHT/2);//
ctx.lineTo(WIDTH/2+Math.cos(angle)*handRadius,HEIGHT/2+Math.sin(angle)*handRadius);
ctx.stroke();
},
//
drawHands:function(){
var _d = new Date,_h = _d.getHours(),
_h = _h>12?_h-12:_h;
this.drawHand(_h*5+(_d.getMinutes()/60)*5,true);
this.drawHand(_d.getMinutes(),false);
this.drawHand(_d.getSeconds(),false);
},
//
drawClock: function () {
ctx.clearRect(0,0,WIDTH,HEIGHT);//
this.drawCircle();
this.drawCenter();
this.drawHands();
//this.drawNumerals();
}
}
ctx.font = FONT_HEIGHT+"px";
loop = setInterval(function(){
_functions.drawClock.call(_functions);
},1000);
})(window);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas </title>
<style>
*,html,body{
padding:0;
margin: 0;;
}
body{
background: #aaaaaa;
text-align: center;
}
#canvas{
margin: 0 auto;
border: thin solid dodgerblue;
background: #ffffff;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
</body>
<script src="clock.js"></script>
</html>