<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
/*更改canvas的属性,使其可以通过css居中显示*/
canvas{
display: block;
margin: 60px auto ;
}
/*改变文字时间的样式*/
p{
font:bold 70px "微软雅黑";
text-align: center;
}
</style>
</head>
<body>
<!--创建一个画布-->
<canvas width="700px" height="700px" id="canvas"></canvas>
<!--创建一个可以接收时间文字的段落-->
<p id="p"></p>
<script type="text/javascript">
// 将canvas获取到,并getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 获取需要填写时间的段落
var p = document.getElementById("p");
// 获取canvas的宽高,设置表盘半径
var w = canvas.width;
var h = canvas.height;
// console.log(w)
var r = w / 2;
// 将时间数字画出,以及表盘上的小圆点画出
function fun(){
context.save();
context.translate(r,r);
context.beginPath();
context.strokeStyle = "aqua";
context.lineWidth = 10;
context.arc(0,0,r-5,0,Math.PI * 2)
context.closePath();
context.stroke();
var hournums = [3,4,5,6,7,8,9,10,11,12,1,2];
for(var i = 0;i < hournums.length;i++){
var rad = Math.PI * 2 / 12 * i
var x = Math.cos(rad) * (r-50);
var y = Math.sin(rad) * (r-50);
context.beginPath();
context.textAlign = 'center';
context.textBaseline = "middle";
context.font = "20px Youyuan";
context.fillText(hournums[i],x,y);
context.closePath();
}
for(var j = 0; j < 60;j++){
var rad = Math.PI * 2 / 60 * j;
var x = Math.cos(rad) * (r-25);
var y = Math.sin(rad) * (r-25);
if(j % 5 == 0){
context.beginPath();
context.fillStyle = "#3F97FF";
context.arc(x,y,4,0,Math.PI * 2)
context.closePath();
context.fill()
}else{
context.beginPath();
context.fillStyle = "aquamarine"
context.arc(x,y,2,0,Math.PI * 2)
context.closePath();
context.fill()
}
}
}
// 画出时针
function drawHour(hour,min){
context.save();
var rad = Math.PI * 2 / 12 * hour;
var radd = Math.PI * 2 / 12 / 60 * min;
// var raddd = Math.PI * 2 / 60 / 60 * sec;
context.beginPath();
context.rotate(rad + radd);
context.lineCap = "round";
context.strokeStyle = "#3F97FF";
context.lineWidth = 8;
context.moveTo(0,10);
context.lineTo(0,-r/2);
// context.closePath();
context.stroke();
context.restore();
}
// 画出分针
function drawMin(min,sec){
context.save();
var rad = Math.PI * 2 / 60 * min
var radd = Math.PI * 2 / 60 / 60 * sec;
context.beginPath();
context.rotate(rad + radd);
context.lineCap = "round";
context.strokeStyle = "#3F97FF";
context.lineWidth = 6
context.moveTo(0,10);
context.lineTo(0,-r+70);
// context.closePath();
context.stroke();
context.restore();
}
// 画出秒针
function drawSec(sec){
context.save();
var rad = Math.PI * 2 / 60 * sec
context.beginPath();
context.rotate(rad)
context.fillStyle = "#f00";
context.lineWidth = 4
context.moveTo(-2,15);
context.lineTo(2,15);
context.lineTo(1,-r+50);
context.lineTo(-1,-r+50);
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = "aliceblue";
context.arc(0,0,4,0,Math.PI * 2)
context.closePath();
context.fill();
context.restore();
}
// 将时分秒与当前时间一一对应,并且在最后用文本写出当前时间数字
function drawDate(){
context.clearRect(0,0,w,h);
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
// p.innerHTML = hour.toString() + ":" + min.toString() + ":" + sec.toString();
// console.log(hour.toString())
fun()
drawHour(hour,min)
drawMin(min,sec)
drawSec(sec)
// 判断时分秒的位数是否有两位,没有就在前面加0
if(hour<10){
hour = "0" + hour;
}else{
hour = hour;
}
if(min<10){
min = "0" + min;
}else{
min = min;
}
if(sec<10){
sec = "0" + sec;
}else{
sec = sec;
}
p.innerHTML = hour + ":" + min + ":" + sec;
context.restore();
}
// 设定定时器,每秒刷新一次
setInterval(drawDate,1000)
// 一下是一组线性渐变,可以利用它将表盘边框,指针,表盘小圆点等设置成随机渐变色,增加美感
// var grd = context.createLinearGradient(0,0,500,0);
// grd.addColorStop(0,'rgb(0,0,0)');
// grd.addColorStop(0.1,'#f00');
// grd.addColorStop(0.2,'#0f0');
// grd.addColorStop(0.3,'#00f');
// grd.addColorStop(0.4,'#635');
// grd.addColorStop(Math.random(),'#777');
// grd.addColorStop(Math.random(),'#884');
// grd.addColorStop(Math.random(),'#423');
// grd.addColorStop(Math.random(),'#fff');
// grd.addColorStop(Math.random(),'#abc');
// grd.addColorStop(1,'rgb(255,255,255)');
// context.fillStyle = grd;
// context.fillRect(0,0,500,200);
</script>
</body>
</html>
利用canvas画一个简单的表盘，对应系统当前时间，canvas练习
猜你喜欢
转载自blog.csdn.net/S_1978P1/article/details/82184006
今日推荐
周排行