当前位置：网站首页>钟表刻度线

钟表刻度线

2022-08-02 03:22:00 【cjx177187】

钟表

思路：

画一个圆
给圆上画上刻度线
1. 将圆划分为60分，每份上画出线
2. 利用if判断每五个将线条延长，当作小时的刻度
利用计时器画出时针，分针，秒针

<body>

<style>

#box {

border: 1px solid black;

}

</style>

var canvas = document.querySelector("#box")

var pen = canvas.getContext("2d")

var deg = Math.PI / 180

var x = 300

var y = 300

var r = 150

//钟表框

function construction() {

pen.beginPath()

pen.arc(y, x, r, 0 * deg, 360 * deg)

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

var x1 = r * Math.cos(6 * deg * i) + x

var y1 = r * Math.sin(6 * deg * i) + y

if (i % 5 == 0) {

a = 20

} else {

a = 10

}

var x2 = (r - a) * Math.cos(6 * deg * i) + x

var y2 = (r - a) * Math.sin(6 * deg * i) + y

pen.moveTo(x1, y1)

pen.lineTo(x2, y2)

}

pen.stroke()

}

//秒针

function seconds() {

pen.beginPath(300, 300)

pen.moveTo(300, 300)

var time = new Date().getSeconds()

var x3 = 130 * Math.cos(((6 * time) -90) * deg) + x

var y3 = 130 * Math.sin(((6 * time) -90) * deg) + y

pen.lineTo(x3, y3)

pen.stroke()

}

//时针

function hours() {

pen.beginPath(300, 300)

pen.moveTo(300, 300)

var time = new Date().getHours()

var x4 =60 * Math.cos(((120 * time)+90) * deg) + x

var y4 =60 * Math.sin(((120 * time)+90) * deg) + y

pen.lineTo(x4, y4)

pen.stroke()

}

//分针

function minutes() {

pen.beginPath(300, 300)

pen.moveTo(300, 300)

var time = new Date().getMinutes()

var x5 = 90 * Math.cos(((10 * time)-90) * deg) + x

var y5 = 90 * Math.sin(((10 * time)-90) * deg) + y

pen.lineTo(x5, y5)

pen.stroke()

}

//计时器运转秒针

setInterval(function () {

canvas.width = 600

seconds()

hours()

minutes()

construction()

}, 1000)

</script>

原网站

版权声明
本文为[cjx177187]所创，转载请带上原文链接，感谢
https://blog.csdn.net/cjx177187/article/details/125957166

当前位置：网站首页>钟表刻度线

钟表刻度线

边栏推荐

猜你喜欢

随机推荐