canvas|canvas制作一个简易时钟 canvas|前端

【canvas|canvas制作一个简易时钟】效果如下：

文章图片

之前写的博客canvas基本用法，基本动画转换、旋转、缩放

Document - 锐客网 > #myCanvas { background-color: #ccc; } > // 1、获取画布节点 let myCanvas = document.getElementById("myCanvas"); // 2、通过画布节点区获取画笔 let pen = myCanvas.getContext("2d"); pen.translate(300, 300); //把画布的中心点设为画布的0，0点 scale(); setInterval(() => { scale(); }, 10); //每个10毫秒就获取一次,防止网路卡顿的情况下显示不正常//整个时钟封装函数 function scale() { pen.clearRect(-300, -300, myCanvas.width, myCanvas.height); //每一次都清空一下画布 pen.save(); //时钟圆的样式 pen.strokeStyle = '#FF5511'; pen.lineWidth = '8'; pen.beginPath(); pen.arc(0, 0, 200, 0, 360 * Math.PI / 180); pen.stroke(); pen.restore(); //绘制刻度的样式 pen.save(); pen.strokeStyle = "orange"; pen.lineCap = "round"; pen.beginPath(); for (let i = 0; i < 60; i++) {//一共循环60次，也就是60分钟，画60个刻度 pen.moveTo(0, -185); if (i % 5 == 0) {//整点刻度 pen.lineTo(0, -155); } else { pen.lineTo(0, -170); pen.lineWidth = 6; } pen.rotate(6 * Math.PI / 180); //每次旋转的角度6°=360°/60 } pen.stroke(); pen.restore(); //日期对象 let dt = new Date(); let hour = dt.getHours(); //获取小时北京时间 let minute = dt.getMinutes(); //获取分 let second = dt.getSeconds(); //获取秒//秒针 pen.save(); //样式 pen.lineWidth = 5; pen.lineCap = "round"; pen.rotate(second * 6 * Math.PI / 180); //旋转的弧度 = 当前时间的秒数*6° * Math.PI / 180 pen.beginPath(); //图形的绘制 pen.moveTo(0, 0); pen.lineTo(0, -100); pen.stroke(); pen.restore(); //分针 pen.save(); //样式 pen.lineWidth = `7`; pen.lineCap = "round"; //旋转的弧度 = （当前时间的秒数+当前分钟数/60）*6° * Math.PI / 180 pen.rotate((minute + second / 60) * 6 * Math.PI / 180); pen.beginPath(); //图形的绘制 pen.moveTo(0, 0); pen.lineTo(0, -80); pen.stroke(); pen.restore(); //时针 pen.save(); //样式 pen.lineWidth = `10`; pen.lineCap = "round"; //旋转的弧度 = （当前时间的小时数-12+当前分钟数/60）*6° * Math.PI / 180 pen.rotate((hour - 12 + minute / 60) * 30 * Math.PI / 180); pen.beginPath(); //图形的绘制 pen.moveTo(0, 0); pen.lineTo(0, -60); pen.stroke(); pen.restore(); }

canvas|canvas制作一个简易时钟

推荐阅读

电脑上显示无信号怎么办（电脑上显示无信号怎么处理）

佳能760d新手教程佳能760d教程

烟灰缸里为什么不能倒水？烟灰缸不能倒水跟结婚有什么关系

awk|awk if print

兄弟打印机9310硒鼓单元的正确使用方法和注意事项

东鹏美容花洒质量怎么样？东鹏美容花洒如何安装

红酒可以过安检吗火车安检红酒能过吗

手机内部结构图，手机构造分析

高铁票价格查询表「最新火车时刻表」

柴进的性格特点柴进的性格特点介绍

苹果airplay在哪里开启 airplay在哪里打开

癌症|为何我国被称为癌症大国，难道是过量吃肉？提醒：这4种肉要少吃

怎么编写关机程序，关机编程怎么编

爱普生L805不用清零

如何连接音响蓝牙如何链接音响，如何连接音响设备

脱腿毛多少钱

投稿|大象转身牵一发动全身，阿里推猫享不仅仅对标京东

婴儿医保怎么办理婴儿医保如何办理

速冻虾尾怎么做好吃

ps礼花效果制作 Photoshop设计礼花效果的图文详细步骤