使用canvas画动态时钟

使用到的知识:

  1.     获取系统时间

  2.     画图形,空心图形,实心图形,以及其它一些属性

  3.     for循环

前期准备:

  a. HTML中准备一个容器存放画布,并为其设置width,height。

    <canvas id="myCanvas" width="500" height="400"></canvas>

  b.在js中获取canvas画布元素,并获得其上下文,对应的方法如下:

        var c = document.getElementById(‘myCanvas‘);//获取Canvas对象
        var ctx = c.getContext(‘2d‘);//获取上下文

代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas绘制时钟Demo</title>
    <style>
        #myCanvas{
            border: 1px solid;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="400">
        很抱歉,你的浏览器不支持canvas元素
    </canvas>
    <script>
        var c = document.getElementById(‘myCanvas‘);//获取Canvas对象
        var ctx = c.getContext(‘2d‘);//获取上下文
        function drawClock()
        {
            ctx.clearRect(0,0, c.width, c.height);//清除画布
            c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠
            var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径
            /*获取实际的时间*/
            var objTime = new Date();
            var objHour = objTime.getHours();
            var objMin = objTime.getMinutes();
            var objSen = objTime.getSeconds();
            /*将时间转换为具体的弧度*/
            /*
             * 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向
             * 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间
             * 分针和秒针是每次相隔6度
             */
            var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;
            var arcMin = (-90+objMin*6)*Math.PI/180;
            var arcSen = (-90+objSen*6)*Math.PI/180;
            /*绘制圆盘*/
            ctx.beginPath();
            for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60
            {
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();
            /*绘制白盘盖住下面的线*/
            ctx.fillStyle = ‘white‘;
            ctx.beginPath();
            ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19
            ctx.closePath();
            ctx.fill();
            /*依葫芦画瓢,制作每一个小时的线*/
            /*绘制圆盘*/
            ctx.beginPath();
            ctx.lineWidth = 3;
            for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12
            {
                ctx.moveTo(x,y);
                ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
            }
            ctx.closePath();
            ctx.stroke();
            /*绘制白盘盖住下面的线*/
            ctx.fillStyle = ‘white‘;
            ctx.beginPath();
            ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18
            ctx.closePath();
            ctx.fill();
            /*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*/
            /*开始绘制时针*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 7;
            ctx.lineCap = ‘round‘;
            ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10
            ctx.stroke();
            ctx.closePath();
            /*开始绘制分针*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 5;
            ctx.lineCap = ‘round‘;
            ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12
            ctx.stroke();
            ctx.closePath();
            /*开始绘制秒针*/
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.lineWidth = 2;
            ctx.lineCap = ‘round‘;
            ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16
            ctx.stroke();
            ctx.closePath();
        }
        setInterval(‘drawClock()‘,1000);//每隔1秒调用绘制时钟函数
    </script>
</body>
</html>

静态效果图:

原文地址:https://www.cnblogs.com/youwei716/p/11267273.html

时间: 2024-11-05 15:57:19

使用canvas画动态时钟的相关文章

玩转html5(四)----使用canvas画一个时钟(可以动的哦!)

先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <html> <body> <canvas width="500" height="500" id="clock" > 您的浏览器不支持canvas </canvas> <script> //获取画布

Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟

概述: 很多时候我们想要自己写一些类似时钟.罗盘的控件,却又找不到合适的Demo.我想这时你可能索性就直接上图片了.在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的确是有一些尴尬了.下面我就利用一步一步实现自定义时钟来对这个问题做一个讲解.(注明:本人不太会制作GIF图片,以下图片均不能动态展示,想要查看动态效果,请转到博客末尾处下载源码进行查看) 错误示例: 这里我有一个"错误"的示例.这里的错误其实应该是要打上双引号的,因为它不是真的错误,只是在

应用canvas绘制动态时钟--每秒自动动态更新时间

使用canvas绘制时钟 下文是部分代码,完整代码参照:https://github.com/lemoncool/canvas-clock,可直接下载. 首先看一下效果图:每隔一秒会动态更新时间 一.前期准备 1. HTML中准备一个容器存放画布,并为其设置width,height. <div> <canvas id="clock" height="200px" width="200px"></canvas>

canvas之动态时钟

1 function showTime(){ 2 var can=document.getElementById("canvas"); 3 var c=can.getContext("2d");//定义2D画布 4 can.width="1000"; 5 can.height="600"; 6 //平移确定中心 7 c.translate(500,300); 8 //获取本地时间 9 var sum=new Date(); 1

canvas:动态时钟

此时针是以画布的中心为圆心: ctx.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,width/2) 数字的位置我们利用了三角函数的原理 x=rcosα: y=rsinα: α = 2 * π * i * 30 / 360: 利用取余把12,3,6,9的样式改变 var arr = [3,4,5,6,7,8,9,10,11,12,1,2]; var x=0, y=0; var rad = 0; for (var i=0;i<arr.length

利用canvas画一个动态时钟

目标:利用canvas画布画一个动态时钟,根据目前的时间可以实时更新的,可以在过程中添加一些效果,比如让时钟外围的一圈颜色渐变,时钟上的数字颜色改变,时钟的指针颜色改变... 设置一个定时器 先放上一张效果图,参考一下 先建一个画布,写好样式 <style type="text/css"> *{ margin: 0; padding: 0; } div{ //设置div的text-align为center,margin-top text-align: center; mar

canvas简单实现动态时钟

使用到的知识: 1.     获取系统时间 2.     画图形,空心图形,实心图形,以及一些属性 3.     for循环 准备工作:添加一块画布1000*1000(随意),引用canvas.js <!doctype html> <html>  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus?&quo

canvas :原生javascript编写动态时钟

canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,width/2) 绘制表盘 function jiang(){ r = width/2 g.clearRect(0, 0, 600, 600); g.save(); g.translate(r, r); g.rotate(-Math.PI / 2); //分钟刻度线 for(var i = 0; i < 60;

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc