用canvas画时钟

开始画图

1.先设置一块画布。

</p> <p>.cvs {</p> <p>border：solid 1px blue; //加一个边框更容易确定位置</p> <p>display: block; //把canvas设置为块</p> <p>margin: auto; //canvas居中显示</p> <p>}</p> <p>

2.画一个圆，并将圆心坐标重新设为(0，0)

var c = document.getElementsByClassName('cvs')[0]

var cv = c.getContext('2d')

cv.translate(250, 250)

function yuan() {

cv.lineWidth = 10;

cv.beginPath()

cv.arc(0, 0, 245, 0, 2 * Math.PI, false)

cv.closePath()

cv.stroke()

}

3.在钟面上标上时间和刻度

function num() {

var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

for (i = 0; i < nums.length; i++) {

var rad = 2 * Math.PI / 12 * i;

var x = Math.cos(rad) * 215;

var y = Math.sin(rad) * 215;

cv.font = "20px Georgia";

cv.textBaseline = 'middle';

cv.textAlign = "center";

cv.fillText(nums[i], x, y);

}

for (i = 0; i < 60; i++) {

var rad = 2 * Math.PI / 60 * i;

var x = Math.cos(rad) * 230;

var y = Math.sin(rad) * 230;

cv.beginPath();

if (i % 5 == 0) {

cv.fillStyle = '#000'

} else {

cv.fillStyle = '#ccc'

}

cv.arc(x, y, 2, 0, Math.PI * 2, false)

cv.closePath();

cv.fill()

}

4.开始画时针

function dHour(hour, minu) { //因为时针会随着分针的走动而走动，所以设置两个参数

cv.save();

cv.beginPath();

var rad = 2 * Math.PI / 12 * hour; //时针每小时走的角度

var rad2 = 2 * Math.PI / 12 / 60 * minu;

cv.lineWidth = 8;

cv.lineCap = 'round'

cv.rotate(rad + rad2) //时针走的角度

cv.moveTo(0, 10)

cv.lineTo(0, -115)

cv.stroke();

cv.restore();

}

5.画分针

function dMinu(minu) {

cv.save();

cv.beginPath();

var rad = 2 * Math.PI / 60 * minu;

cv.lineWidth = 5;

cv.lineCap = 'round'

cv.rotate(rad)

cv.moveTo(0, 10)

cv.lineTo(0, -160)

cv.stroke();

cv.restore();

}

6.画秒针，秒针的画法和分针基本上一样
XM返佣https://www.kaifx.cn/broker/x...

function dSecd(secd) {

cv.save();

cv.beginPath();

var rad = 2 * Math.PI / 60 * secd;

cv.lineWidth = 3;

cv.lineCap = 'round'

cv.strokeStyle = "#f00";

cv.rotate(rad)

cv.moveTo(0, 10)

cv.lineTo(0, -200)

cv.stroke();

cv.restore();

}

7.在圆心画一个圆点，用来装饰

function center() {

cv.beginPath()

cv.arc(0, 0, 5, 0, 2 * Math.PI, false)

cv.fillStyle = "gray"

cv.fill()

}

8.让指针转动

function time() {

var d = new Date();

var h = d.getHours();

var m = d.getMinutes();

var s = d.getSeconds();

// var cr = Math.floor(Math.random() * 256)

// var cg = Math.floor(Math.random() * 256)

// var cb = Math.floor(Math.random() * 256)

// document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')'; //网页背景每秒随机改变，可以不要

cv.clearRect(-250, -250, 500, 500); //每次都清除一下画布，不然每次指针转动都会留下轨迹

yuan()

num()

dHour(h, m)

dMinu(m)

dSecd(s)

center()//将前面函数全部调用

}

time()

setInterval(time, 1000);设置定时器，每秒调用一次

完整代码
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clock</title>
</head>

<body>
<style>
.cvs {
display: block;
margin: auto;
}
</style>
<canvas class="cvs" width="500px" height="500px"></canvas>

function yuan() {
cv.lineWidth = 10;
cv.beginPath()
cv.arc(0, 0, 245, 0, 2 * Math.PI, false)
cv.closePath()
cv.stroke()
}

}
}

// 时针
function dHour(hour, minu) {
cv.save();
cv.beginPath();
var rad = 2 * Math.PI / 12 * hour;
var rad2 = 2 * Math.PI / 12 / 60 * minu;
cv.lineWidth = 8;
cv.lineCap = 'round'
cv.rotate(rad + rad2)
cv.moveTo(0, 10)
cv.lineTo(0, -115)
cv.stroke();
cv.restore();
}
// 分针
function dMinu(minu) {
cv.save();
cv.beginPath();
var rad = 2 * Math.PI / 60 * minu;
cv.lineWidth = 5;
cv.lineCap = 'round'
cv.rotate(rad)
cv.moveTo(0, 10)
cv.lineTo(0, -160)
cv.stroke();
cv.restore();
}
// 秒针
function dSecd(secd) {
cv.save();
cv.beginPath();
var rad = 2 * Math.PI / 60 * secd;
cv.lineWidth = 3;
cv.lineCap = 'round'
cv.strokeStyle = "#f00";
cv.rotate(rad)
cv.moveTo(0, 10)
cv.lineTo(0, -200)
cv.stroke();
cv.restore();
}
// 圆心
function center() {
cv.beginPath()
cv.arc(0, 0, 5, 0, 2 * Math.PI, false)
cv.fillStyle = "gray"
cv.fill()
}

function time() {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
// var cr = Math.floor(Math.random() * 256)
// var cg = Math.floor(Math.random() * 256)
// var cb = Math.floor(Math.random() * 256)
// document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')';
cv.clearRect(-250, -250, 500, 500);
yuan()
num()
dHour(h, m)
dMinu(m)
dSecd(s)
center()
}
time()
setInterval(time, 1000);
</script>
</body>

</html>

用canvas画时钟

zhuanzhudeyipi

引用和评论

外汇直接标价和间接标价之间有什么区别？

JavaScript实现的水果忍者游戏，支持鼠标操作

qml实现头像裁剪功能

突破Canvas困境：低成本实现Web端流程图设计功能之道