canvas js 实现钟表效果

canvas 实现钟表效果

注意浏览器兼容问题
代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100%;height: 602px;text-align: center;/* color:aqua; */}</style>
</head><body><div class="box"><canvas id="canvas"></canvas><h1></h1></div>
</body></html>
<script>let can = document.querySelector('#canvas');can.width = 600;can.height = 600;can.style.border = '1px solid red';let ctx = can.getContext('2d');console.log(ctx);// 初始化画布坐标，执行完下面的的语句，，画布(300,300)的坐标为(0,0)ctx.translate(300, 300);function timer() {ctx.beginPath();ctx.strokeStyle = '#000';ctx.lineWidth = 4;ctx.fillStyle = '#eee';ctx.arc(0, 0, 300, 0 * Math.PI, 2 * Math.PI, true);ctx.closePath();ctx.stroke();ctx.fill();// 保存当前环境的状态ctx.save();for (let i = 1; i <= 60; i++) {ctx.lineWidth = i % 5 ? 5 : 10;ctx.strokeStyle = i % 5 ? "blue" : "red";ctx.rotate(360 / 60 * Math.PI / 180);ctx.beginPath();// 下面的 moveTo和lineTo表示，旋转着画，开始时坐标x的280，结束时坐标x的300ctx.moveTo(i % 5 ? "285" : "275", 0);ctx.lineTo(300, 0);ctx.stroke();ctx.closePath();}// 返回之前保存过的路径状态和属性ctx.restore();ctx.save();let date = new Date();let hh = date.getHours();let h1 = hh % 12; //12小时制的时间；let m1 = date.getMinutes();let s = date.getSeconds();s = s < 10 ? '0' + s : s;let h = h1 + m1 / 60;let m = m1 + s / 60;let H1 = document.querySelector('H1');H1.innerHTML = "当前时间为：" + hh + "时" + m1 + "分" + s + "秒";// console.log(h, m, s);//时ctx.rotate((360 / 12 * h - 90) * Math.PI / 180);ctx.beginPath();ctx.lineWidth = 10;ctx.moveTo(0, 0);ctx.lineTo(170, 0);ctx.stroke();ctx.closePath();ctx.restore();ctx.save();// 分ctx.rotate((360 / 60 * m - 90) * Math.PI / 180);ctx.beginPath();ctx.lineWidth = 7;ctx.strokeStyle = 'blue';ctx.moveTo(0, 0);ctx.lineTo(220, 0);ctx.stroke();ctx.closePath();ctx.restore();ctx.save();// 秒ctx.rotate((360 / 60 * s - 90) * Math.PI / 180);ctx.beginPath();ctx.lineWidth = 4;ctx.strokeStyle = 'red';ctx.moveTo(0, 0);ctx.lineTo(270, 0);ctx.stroke();ctx.closePath();ctx.restore();ctx.beginPath();ctx.strokeStyle = '#000';ctx.lineWidth = 4;ctx.fillStyle = '#fff';ctx.arc(0, 0, 10, 0 * Math.PI, 2 * Math.PI, true);ctx.closePath();ctx.stroke();ctx.fill();ctx.beginPath();ctx.font = " bold 30px 黑体";for (let i = 0; i < 12; i++) {// 子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥// let numbers = ['丑时', '寅时', '卯时', '辰时', '巳时', '午时', '未时', '申时', '酉时', '戌时', '亥时', '子时'];// let numbers = ['丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥', '子'];let numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];ctx.rotate(360 / 12 * Math.PI / 180);// 填色ctx.fillStyle = '#000';ctx.fillText(numbers[i], -10, -230);// ctx.strokeText(numbers[i], -25, -230);}ctx.closePath();}setInterval(() => {// ctx.save();timer();// ctx.restore();}, 1000);
</script>

canvas js 实现钟表效果相关推荐

原生JS实现钟表效果
效果图: HTML: <div id="clock"><div id="h"></div><div id=" ...
利用canvas实现钟表效果
今天学习了基础的canvas,发现canvas很有意思,具体的知识点先不总结,等我学完了一起总结,先上一个自己写的小实例,嗯.直接上代码 <!DOCTYPE html> <html ...
js html 卡通学生,JavaScript+html5 canvas绘制的小人效果
本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: canvas中的缩放 #canvas ...
html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
JS实现Canvas中图片淡出效果_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>实现C ...
canvas制作简单钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
canvas三角函数模拟水波效果
原文:canvas三角函数模拟水波效果最近项目中,ui设计了个水波效果的背景动画,然而并没有gif或svg动画,开始试着用css实现了一下,动画效果并不是很好,网上查了下基本都是用贝赛尔曲线实现,想 ...
（30个原生js挑战）原生js实现钟表
紧接着昨天的实例,第二个是原生js实现钟表特效. 首先介绍下大致思路,首先要用css把时针分针和秒针画出来.然后根据钟表中,角度和时间的算法关系. 设置角度. 最后使用定时器,每秒运行一次. 需要注意 ...
HTML 星空动图背景（canvas+JS）
HTML 星空动图背景(canvas+JS) 前几天看项目的时候看到一个星空动图,当时还以为是拿了一张GIF做背景,结果看代码找半天没找到,后来仔细阅读代码才发现原来是用canvas和JS做的,然后我 ...

canvas js 实现钟表效果

canvas 实现钟表效果

canvas js 实现钟表效果相关推荐

最新文章

热门文章