canvas时钟详解编程语言
编程语言 详解 时钟 Canvas
2023-06-13 09:20:36 时间
代码如下,复制即可使用:
!DOCTYPE html html lang="en" head meta charset="UTF-8" title canvas时钟 /title style div { text-align: center; margin-top: 15%; /style /head body div canvas id="clock" height="200px" width="200px" /canvas /div script var dom = document.getElementById(clock); var ctx = dom.getContext(2d); var width = ctx.canvas.width; var height = ctx.canvas.height; var r = width / 2; var rem = width / 200; // 画圆 function drawBackground() { ctx.save();//save() 保存当前环境的状态 ctx.translate(r, r);//translate() 重新映射画布上的 (0,0) 位置 ctx.beginPath();//beginPath() 起始一条路径,或重置当前路径 ctx.lineWidth = 10 * rem;//lineWidth 设置或返回当前的线条宽度 ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) //arc() 创建弧/曲线(用于创建圆形或部分圆) ctx.stroke();//stroke() 绘制已定义的路径 //12个点 var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; ctx.font = 18 * rem + "px arial"; ctx.textAlign = "center";//textAlign 设置或返回文本内容的当前对齐方式 ctx.textBaseline = "middle";//textBaseline 设置或返回在绘制文本时使用的当前文本基线 hourNumbers.forEach(function (number, i) { var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (r - 30 * rem); var y = Math.sin(rad) * (r - 30 * rem); ctx.fillText(number, x, y);//fillText() 在画布上绘制“被填充的”文本 }); //60个点 for (var i = 0; i 60; i++) { var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 18 * rem); var y = Math.sin(rad) * (r - 18 * rem); ctx.beginPath(); if (i % 5 === 0) { ctx.fillStyle = "red"; ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); } else { ctx.fillStyle = "#eee"; ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); ctx.fill(); // 时针 function drawHour(hour, minute) { ctx.save(); ctx.beginPath();//beginPath() 起始一条路径,或重置当前路径 var rad = 2 * Math.PI / 12 * hour; var mrad = 2 * Math.PI / 12 / 60 * minute; ctx.rotate(rad + mrad); ctx.lineWidth = 6 * rem; ctx.lineCap = round; ctx.moveTo(0, 10 * rem); ctx.lineTo(0, -r / 2); ctx.stroke(); ctx.restore(); //分针 function drawMinute(minute) { ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.lineWidth = 3 * rem; ctx.lineCap = round; ctx.moveTo(0, 10 * rem); ctx.lineTo(0, -r + 30 * rem); ctx.stroke(); ctx.restore(); //秒针 function drawSecond(second) { ctx.save(); ctx.beginPath(); ctx.fillStyle = "red"; var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-2 * rem, 20 * rem);//moveTo() 把路径移动到画布中的指定点,不创建线条 ctx.lineTo(2 * rem, 20 * rem);//lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条 ctx.lineTo(1, -r + 18 * rem); ctx.lineTo(-1, -r + 18 * rem); ctx.fill();//fill() 填充当前绘图(路径) ctx.restore(); // 圆点 function drawDot() { ctx.beginPath(); ctx.fillStyle = "write"; ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false); ctx.fill(); function draw() { ctx.clearRect(0, 0, width, height);//clearRect() 在给定的矩形内清除指定的像素 var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); drawBackground(); drawHour(hour, minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore();//restore() 返回之前保存过的路径状态和属性 draw(); setInterval(draw, 1000); /script /body /html
如有错误,欢迎联系我改正,非常感谢!!!
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/12326.html
cjava相关文章
- 用PyQt实现透明桌面时钟小部件详解编程语言
- js贪吃蛇代码分享详解编程语言
- Hibernate 泛型DAO实现代码详解编程语言
- java socket tcp通讯,多个客户端连接服务器简单例子详解编程语言
- WordPress Option API(数据库储存 API)详解编程语言
- 队列的存储结构的实现(C/C++实现)详解编程语言
- Android AIDL 一探究竟详解编程语言
- JAVA高级工程师课程笔记整理——(二)JAVA基础详解编程语言
- JQuery给iframe添加html详解编程语言
- Java静态代码块、构造代码块、构造函数详解编程语言
- hone hone clock人体时钟详解编程语言
- Spring中你不知道的注入方式详解编程语言
- 使用javaScript来对表单中的年龄做验证详解编程语言
- JS学习之动态加载script和style样式详解编程语言
- $.cookie()取值设置详解编程语言
- CSS3 圆形时钟式网页进度条详解编程语言
- css3 pointer-events:auto;详解编程语言
- javascript 面向对象编程之创建对象详解编程语言
- c# spring aop的简单例子详解编程语言
- Linux中使用的编程语言是C(linux用的是c)