LV2之-----canvas 画布实现自转时钟& 大转盘

最新推荐文章于 2022-06-16 13:56:59 发布

水兮泱泱

最新推荐文章于 2022-06-16 13:56:59 发布

阅读量399

点赞数 2

分类专栏：编程练习学习笔记前端LV2 文章标签： canvas

本文链接：https://blog.csdn.net/DU123_/article/details/90408635

版权

本文通过canvas画布技术详细讲解了如何创建动态的系统时钟和互动转盘效果，涵盖画布的基本操作和动画原理。

摘要由CSDN通过智能技术生成

canvas 画布运用实例：1.系统时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas {
   
            /* border: 1px solid #000;
            background-color: #ff8c8c; */
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <canvas width="600" height="600" id="mycanvas">你的浏览器不支持 canvas 请更换浏览器</canvas>
    <script>
        // ------------------------相关知识点------------------------
        //弧度：arc(中心点x，中心点y，r，起始角度，结束角，false/ture)     注意！！-----false/ture ：默认为false 顺时针方向，ture 逆时针，即为另一半线条
        // context.arc(100,100,50,0,180*Math.PI/180)//  画出一个弧， 默认从3点钟方向顺时针画
        // context.arc(100,100,50,0,360*Math.PI/180)//  弧， 
        // context.arc(100,100,50,0,90*Math.PI/180,true) 
        // context.stroke()       
        // 旋转偏移：
        // context.rotate(6*Math.PI/180)
        // context.beginPath()
        // context.moveto(0,0)
        // context.lineto(0,100)
        // cintext.stroke()



        // ------------------------- 用canvas画一个时钟 ------------------------

        var context = document.getElementById('mycanvas').getContext('2d'); //获取上下文


        function drawClock() {
   

            // --------------第五步：得到系统当前的 秒，分，时，分别赋给下面的 秒针，分针，秒针.-----------
            var d = new Date()
            seconds = d.getSeconds()
            minutes = d.getMinutes()
            hour = d.getHours()
            context.clearRect(0, 0, 600, 600) //清除画布

            // -------------------- 第 0 步：画 外部修饰物   ----------------
            // 1.1：画表盘外面的圆：
            // 外框圆 1：
            context.beginPath()
            context.arc(300, 300, 210, 0, 360 * Math.PI / 180)
            context.stroke();
            // 给圆填充颜色的代码如下 ：
            // context.fillStyle = 'pink';
            // context.fill();