canvas入門-小時鐘
html:
<body>
<div>
<canvas id="clock" height="200px" width="200px"></canvas>
</div>
<script type="text/javascript" src="clock.js"></script>
</body>
js:
/**
* Created on 2016/10/9.
*/
var dom=document.getElementById("clock");
var ctx=dom.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width / 2;
var rem=width/200;
function drawBackground() {
ctx.beginPath();
ctx.lineWidth=10 * rem;
ctx.arc(0, 0, r-ctx.lineWidth / 2, 0, 2*Math.PI, false);
ctx.strokeStyle="#eacd76";
ctx.stroke();
var hours =[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18 * rem +'px Arial';
ctx.textAlign="center";
ctx.textBaseline="middle";
hours.forEach(function (number ,i ) {
var rad= 2 * Math.PI / 12 * i;
var x= Math.cos(rad) * (r - 30 * rem);
var y= Math.sin(rad) * (r - 30 * rem);
ctx.fillText(number,x ,y);
});
for(var i=0 ;i<60 ;i++){
var rad= 2 * Math.PI / 60 * i;
var x= Math.cos(rad) * (r - 18 * rem);
var y= Math.sin(rad) * (r - 18 * rem);
ctx.beginPath();//起始一條路徑，或重置當(dāng)前路徑
if(i%5==0){
ctx.fillStyle ='#000';
ctx.arc(x, y, 2 * rem, 0, 2*Math.PI, false);
}else{
ctx.fillStyle ='#ccc';
ctx.arc(x, y, 2 * rem, 0, 2*Math.PI, false);
}
ctx.fill();
}
}
//x=r * cosT y=
function drawHour(hour , minute) {
ctx.save();
ctx.beginPath();//起始一條路徑，或重置當(dāng)前路徑
var rad= 2 * Math.PI /12 *hour,
mard= 2 * Math.PI /12 /60 * minute;
ctx.rotate(rad + mard);
ctx.lineCap='round';
ctx.lineWidth=6 * rem;
ctx.moveTo(0,10 * rem);
ctx.lineTo(0,-r/2);
ctx.strokeStyle="#f2be45";
ctx.stroke();
ctx.restore();
}
function drawMinute(minute) {
ctx.save();
ctx.beginPath();
var rad= 2 * Math.PI /60 *minute;
ctx.rotate(rad);
ctx.lineCap='round';
ctx.lineWidth=3;
ctx.moveTo(0,10 * rem);
ctx.lineTo(0,-r + 30 * rem);
ctx.strokeStyle="#f2be45";
ctx.stroke();
ctx.restore();
}
function drawSecond(second) {
ctx.save();
ctx.beginPath();
ctx.fillStyle='#c14543';
ctx.lineWidth=1;
var rad= 2 * Math.PI /60 *second;
ctx.rotate(rad);
ctx.moveTo(-2 * rem,20 * rem);
ctx.lineTo(2 * rem ,20 * rem);
ctx.lineTo(1,-r + 18* rem);
ctx.lineTo(-1,-r + 18* rem);
ctx.fill();
ctx.restore();
}
function drawDot() {
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0,0,3 * rem,0,2*Math.PI,false);
ctx.fill();
}
function draw() {
ctx.clearRect(0,0,width,height);//在給定的矩形內(nèi)清除指定的像素
ctx.save();//**保存當(dāng)前環(huán)境的狀態(tài)(此時的坐標(biāo)原點(0,0)還是左上角)
ctx.translate(r,r);//重新映射畫布上的 (0,0) 位置
//此時的坐標(biāo)原點(0,0)已經(jīng)移至到(r,r)
var now=new Date(),
hour=now.getHours(),
minute=now.getMinutes(),
seconed=now.getSeconds();
drawBackground();
drawHour(hour , minute);
drawMinute(minute);
drawSecond(seconed);
drawDot();
ctx.restore();//**返回之前保存過的路徑狀態(tài)和屬性;
//目的：clearRect(0,0,width,height);清除矩形的(0,0)點還原為左上角
}
setInterval(function(){
draw()
},1000);
//小結(jié)：canvas入門的很好例子！贊
//
/*1：save() 與 restore() 成對出現(xiàn)一個是保存當(dāng)前的狀態(tài)，因一個是還原之前保存過的路徑狀態(tài)和屬性;
* 2:beginPath()出場率較高--原因：起始一條路徑，或重置當(dāng)前路徑都會調(diào)用此方法
* 3：畫圖的兩種方式fill() 與 stroke()
* 4：創(chuàng)建線條lineTo();創(chuàng)建弧/曲線 arc()
* 5：改變繪制原點-重新映射畫布上的 (0,0) 位置translate()
* 6：rotate(arg)旋轉(zhuǎn)當(dāng)前繪圖 , 參數(shù)弧度制
* 7：弧度制，滿圓的弧度=2 * Math.PI
* 8 :小時鐘的自適應(yīng)-等比放大 */
//擴展：可以用canvas繪制一個圓形的百分比視圖會比svg簡單很多吧，以后補充吧！
//最后感謝慕課網(wǎng)的老師傳授canvas時鐘的繪制，再次感謝！
