HTML5-Canvas动态时钟

最新推荐文章于 2021-07-02 00:11:46 发布

本该如此

最新推荐文章于 2021-07-02 00:11:46 发布

阅读量359

点赞数 1

分类专栏： HTML5 CSS

本文链接：https://blog.csdn.net/qq_40922859/article/details/105369313

版权

这篇博客介绍了如何利用HTML5的Canvas API创建一个实时更新的动态时钟。通过Canvas的基本绘图方法，实现时针、分针和秒针的转动效果，展示了Canvas在动态图形绘制上的应用。

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

Canvas基础小案例-动态小时钟

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="https://cdn.anyway1314.cn/firework20200317.png">
    <title>Canva动态时钟</title>
</head>

<body style="background: lightsteelblue;"> 
    <canvas id=mycanvas width=500 height=500 style="margin: 200px 650px;"></canvas>
	<script>
    // 获取Canvas对象
	var cav=document.getElementById("mycanvas");
    //获取对应的CanvasRenderingContext2D对象(画笔)
	var cxt=cav.getContext("2d");

	function drawClock(){
    
		cxt.clearRect(0,0,500,500)

        var now=new Date()
        sec=now.getSeconds()
        min=now.getMinutes()
        hour=now.getHours()
        hour=hour+min/60
        hour=hour>12?hour-12:hour
        
        // 内部阴影
        cxt.beginPath()
        //绘制一个以坐标点(250,250)为圆心、半径为190px的圆形
        cxt.arc(250,250,190,0,2*Math.PI,false)
        //创建一个表示放射性颜色渐变的CanvasGradient对象
        //该对象的作用域是以(258,258)为圆心、半径为175px的内圆和以(258,258)为圆心、半径为190px的外圆之间的环状区域
        var grad=cxt.createRadialGradient(258,258,175,258