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>
相关文章
|
25天前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
26 5
|
2月前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
2月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
1月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
26 0
|
2月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
2月前
|
前端开发
在 HTML canvas 绘制文本
在 HTML canvas 绘制文本
20 0
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
981 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1352 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.2 图形的渲染
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.2节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1255 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.1 变形
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.1节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1038 0