您的位置：首页 > 其它
canvas实现简易时钟效果

2017-09-24 13:03 459 查看
代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementById('canvas');
canvas.width = 500;
canvas.height = 500;
// canvas.style.background = '#000';
// canvas.style.border = "1px solid red";

var ctx = canvas.getContext('2d');

function clock(){
// -----获取实时时间
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = hour > 12 ? (hour-12):hour;
// console.log(hour+":"+date.getMinutes()+":"+sec);
hour += (min/60);
min += (sec/60);

ctx.clearRect(0,0,canvas.width,canvas.height);
// -----画圆盘
ctx.beginPath();
ctx.arc(250,250,200,2*Math.PI,0);
ctx.strokeStyle = "#00FFFF";
ctx.lineWidth = 10 ;
ctx.stroke();
ctx.closePath();

// 裁剪成圆形
ctx.clip();

// 添加背景图片
var img = new Image();
img.src = "image/pic1.jpg"
ctx.drawImage(img,0,0,500,500);
// 添加文字
ctx.textBaseline = "top";
ctx.font = "20px 微软雅黑";
ctx.fillStyle = "#F00";
ctx.fillText("Made In China",180,370);
// 添加刻度数字
ctx.font = "20px 微软雅黑";
ctx.fillStyle = "#FF0";
ctx.fillText("12",238,75);
ctx.fillText("6",242,400);
ctx.fillText("3",410,238);
ctx.fillText("9",80,238);

//显示时间
ctx.font = "25px 微软雅黑";
ctx.fillStyle = "#000";
var str = date.getHours() +":"+date.getMinutes()+":"+date.getSeconds();
ctx.fillText(str, 200, 330);

// -----绘制小时刻度
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#FFFF00"
ctx.lineWidth = 7;
for(var x=0;x<12;x++){
ctx.beginPath();
ctx.moveTo(0,-195);
ctx.lineTo(0,-175);
ctx.stroke();
ctx.closePath();
ctx.rotate(30*Math.PI/180);
}
ctx.restore();

// -----绘制分钟刻度
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#FFFF00"
ctx.lineWidth = 5;
for(var x=0;x<60;x++){
ctx.beginPath();
ctx.moveTo(0,-195);
ctx.lineTo(0,-185);
ctx.stroke();
ctx.closePath();
ctx.rotate(6*Math.PI/180);
}
ctx.restore();

// -----画时针
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#00FFFF"
ctx.lineWidth = 7;
ctx.beginPath();
ctx.rotate(hour*30*Math.PI/180);
ctx.moveTo(0,10);
ctx.lineTo(0,-130);
ctx.stroke();
ctx.closePath();
ctx.restore();

// -----画分针
ctx.save();
ctx.translate(250,250);
ctx.strokeStyle = "#FFFF00"
ctx.lineWidth = 5;
ctx.beginPath();
ctx.rotate(min*6*Math.PI/180);
ctx.moveTo(0,10);
ctx.lineTo(0,-145);
ctx.stroke();
ctx.closePath();
ctx.restore();

// -----画秒针
ctx.save();
ctx.
4000
translate(250,250);
ctx.strokeStyle = "#FF0000"
ctx.lineWidth = 3;
ctx.beginPath();
ctx.rotate(sec*2*Math.PI/60);
ctx.moveTo(0,10);
ctx.lineTo(0,-160);
ctx.stroke();
ctx.closePath();

// 画小圆1
ctx.beginPath();
ctx.fillStyle = "#FFFF00";
ctx.strokeStyle = "#FF0000";
ctx.arc(0,0,7,0,2*Math.PI,0);
ctx.fill();
ctx.stroke();
ctx.closePath();
// 画小圆2
ctx.beginPath();
ctx.fillStyle = "#FFFF00";
ctx.strokeStyle = "#FF0000";
ctx.arc(0,-135,5,0,2*Math.PI,0);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
}
clock();
setInterval(clock,1000);
</script>
</body>
</html>
效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： canvas
相关文章推荐
新的分享
章节导航