var dum=document.getElementById('clock');
var ctx=dum.getContext('2d');//获取上下文context文件
var width=ctx.canvas.width;//获取宽度
var heigth=ctx.canvas.height;//获取高度
var r=width/2;//获取半径
var rem=width/200;//当时钟改变大小时,不影响其大小比例的参数
/*var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
*/
//定义画圆的函数方法
function drawBackground(){
ctx.save();
ctx.translate(r,r);//获取圆心坐标
ctx.beginPath();
ctx.lineWidth=10 * rem;//设置线的粗细
ctx.fillStyle='blue';
ctx.linec
ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
//圆的的中心点坐标x=0,y=0,圆的半径,起始角(弧度),结束角(弧度),可选参数:false=顺时针,true=逆时针
ctx.stroke();//开始绘制
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18 * rem+'px Arial';//设置数字字体
ctx.textAlign='center';//整体居中
ctx.textBaseline='middle';//整体对齐
//遍历数组中的数字
hourNumbers.forEach(function(number,i){
var rad=2*Math.PI/12*i;//设一个点的弧度
var x=Math.cos(rad)*(r-30* rem);//起始点X坐标
var y=Math.sin(rad)*(r-30* rem);//起始点y坐标
ctx.fillText(number,x,y);
});
//设置秒点数,进行遍历
for (var i=0;i<60;i++) {
var rad=2*Math.PI/60*i;//60秒个秒点
var x=Math.cos(rad)*(r-18 * rem);//每个秒点的x坐标,r-18的意思就是半径稍微比数字的半径大一点,但小于圆的半径
var y=Math.sin(rad)*(r-18 * rem);
ctx.beginPath();
//如果是小时让其为红色,不是为灰色
if(i % 5== 0){
ctx.fillStyle='red';
ctx.arc(x,y,2 * rem,0,2*Math.PI,false);
}else{
ctx.fillStyle='#000';
ctx.arc(x,y,2 * rem,0,2*Math.PI,false);
}
ctx.fill();
}
}
//画时针
function drawHour(hour,minute){
ctx.save();//保存画小时的过程
ctx.beginPath();
var rad=2*Math.PI/12*hour;
var mrad =2*Math.PI/12/60*minute;
ctx.rotate(rad+mrad);//旋转的弧度
ctx.lineWidth=6 * rem;//时针的宽
ctx.lineCap='round';//时针的线条变为圆角
ctx.fillStyle='red'
ctx.moveTo(0,10 * rem);//时针的中心端点坐标
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();//还原画小时之前的状态
}
//画分针
function drawMinute(minute){
ctx.save();//保存画分钟的过程
ctx.beginPath();
var rad=2*Math.PI/60 * minute;
ctx.rotate(rad);
ctx.lineWidth=3 * rem;//时针的宽
ctx.lineCap='round';//时针的线条变为圆角
ctx.moveTo(0,10 * rem);//时针的中心端点坐标
ctx.lineTo(0,-r+30 * rem);
ctx.fillStyle='yellow';
ctx.stroke();
ctx.restore();//还原画分钟之前的状态
}
//画秒针
function drawSecond(second){
ctx.save();//保存画秒针的过程
ctx.beginPath();
ctx.fillStyle='#c14543';
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 * rem,-r+18 * rem);
ctx.lineTo(-1 * rem,-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,heigth);//清除之前的冗余
var now=new Date( );//获取当前时间
var hour=now.getHours();//获取小时
var minute=now.getMinutes();//获取分钟
var second=now.getSeconds(); //获取秒
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
//调用方法;
draw();
setInterval(draw,1000);//调用setInterval函数,每一秒执行一次
canvas编写时钟
最新推荐文章于 2022-10-14 11:34:42 发布