html:canvas画布绘图简单入门-绘制时钟-3

简介: html:canvas画布绘图简单入门-绘制时钟-3

image.png

<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        let width = canvas.width
        let height = canvas.height
        // 绘制内容区域相对画布的大小 80%
        let scale = 0.8;
        // 计算半径
        let radius = Math.floor(Math.min(width, height) * scale * 0.5);
        console.log('radius', radius);
        // 绘制外边框
        // ctx.beginPath();
        // ctx.strokeRect(0, 0, width, height);
        // ctx.closePath()
        // 绘制时钟刻度
        function drawClockScale({
            number = 12,
            strokeStyle = 'black',
            lineWidth = 3,
            lineLength = 20,
        }) {
            ctx.save();
            ctx.strokeStyle = strokeStyle;
            ctx.lineWidth = lineWidth;
            let rotateAngle = (360 / number);
            for (let i = 0; i < number; i++) {
                ctx.rotate((Math.PI / 180) * rotateAngle);
                ctx.beginPath();
                ctx.moveTo(radius - lineLength, 0);
                ctx.lineTo(radius, 0);
                ctx.stroke();
                ctx.closePath()
            }
            ctx.restore();
        }
        function drawClock() {
            ctx.clearRect(0, 0, width, height);
            ctx.save();
            // 将坐标轴原点移动到画布中心
            ctx.translate(width / 2, height / 2);
            // 旋转坐标轴x指向画布正上方
            ctx.rotate(-Math.PI / 180 * 90);
            // 分针和秒针的刻度
            drawClockScale({
                number: 60,
                strokeStyle: 'green',
                lineWidth: 4,
                lineLength: 14
            });
            // 时针刻度
            drawClockScale({
                number: 12,
                strokeStyle: 'red',
                lineWidth: 8,
                lineLength: 20
            });
            // 绘制指针
            let now = new Date();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();
            console.log(`${hour}: ${minute}: ${second}`);
            // 绘制秒针
            ctx.save();
            ctx.beginPath();
            ctx.rotate((Math.PI / 180) * (360 / 60) * second);
            ctx.strokeStyle = "deepskyblue";
            ctx.lineWidth = 2;
            ctx.moveTo(-20, 0);
            ctx.lineTo(radius - 30, 0);
            ctx.stroke();
            ctx.closePath()
            ctx.restore();
            // 绘制分针
            ctx.save();
            ctx.rotate((Math.PI / 180) * ((360 / 60) * minute + (360 / 60 / 60) * second));
            ctx.beginPath();
            ctx.strokeStyle = "green";
            ctx.lineWidth = 4;
            ctx.moveTo(-20, 0);
            ctx.lineTo(radius - 40, 0);
            ctx.stroke();
            ctx.closePath()
            ctx.restore();
            // 处理成12小时制
            if (hour > 12) {
                hour = hour - 12
            }
            // 绘制时针
            ctx.save();
            ctx.beginPath();
            ctx.rotate((Math.PI / 180) * ((360 / 12) * hour + (360 / 12 / 60) * minute + (360 / 12 / 60 / 60) *
                second));
            ctx.strokeStyle = "red";
            ctx.lineWidth = 8;
            ctx.moveTo(-20, 0);
            ctx.lineTo(radius - 50, 0);
            ctx.stroke();
            ctx.closePath()
            ctx.restore();
            // 绘制圆心
            ctx.beginPath();
            ctx.fillStyle = "grey";
            ctx.lineWidth = 10;
            ctx.arc(0, 0, 10, 0, Math.PI / 180 * 360);
            ctx.fill();
            ctx.closePath()
            // 绘制圆
            ctx.beginPath();
            ctx.strokeStyle = "grey";
            ctx.lineWidth = 10;
            ctx.arc(0, 0, radius, 0, Math.PI / 180 * 360);
            ctx.stroke();
            ctx.closePath()
            ctx.restore();
        }
        // 每隔1秒重绘一次
        setInterval(() => {
            drawClock();
        }, 1000)
    </script>
相关文章
|
4天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
15 4
|
4天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
14 1
HTML5 Canvas发光Loading源码
|
4天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
12 1
Canvas实现超酷Loading动画HTML代码
|
4天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
4天前
|
移动开发 前端开发 HTML5
【专栏:HTML 基础篇】HTML 入门:从零开始构建你的第一个网页
【4月更文挑战第30天】本文引导初学者从零开始学习HTML,了解这种标记语言用于构建网页的基础知识。通过介绍HTML的基本结构,如文档类型声明、根标签、头部和主体,以及如何添加文本、设置标题、插入图片、创建链接、使用列表、制作表格和设计表单,帮助读者构建第一个网页。同时强调,结合CSS可实现网页的美化。
|
4天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
4天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
38 0
|
4天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码
|
4天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
4天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。