<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="myCanvas" width="" height=""

    style="border:1px solid #000000;">您的浏览器不支持canvas

</canvas>

<script type="text/javascript">

    var c =document.querySelector('#myCanvas');

    // 标识画布并指明上下文

    var ctx = c.getContext('2d');

    // 1.表盘

    ctx.lineWidth = ;

    ctx.stroeStyle = '#000';

    ctx.beginPath();

    ctx.arc(,,,,,false);

    ctx.stroke()

    ctx.closePath()

    // 刻度

        //     时刻度

        for (var i = ; i < ; i++) {

            ctx.save();

            ctx.lineWidth= ;

            ctx.strokeStyle = 'orange';

                // 设置0,0点位置

                ctx.translate(,);

                // 设置旋转角度

                ctx.rotate(i**Math.PI/);

                ctx.beginPath();

                ctx.moveTo(,);

                ctx.lineTo(,);

                ctx.stroke();

                ctx.closePath();

                ctx.restore()

            }

        // 分刻度

        for (var i = ; i < ; i++) {

            ctx.save();

            ctx.lineWidth= 4.5;

            ctx.strokeStyle = 'orange';

                // 设置0,0点位置

                ctx.translate(,);

                // 设置旋转角度

                ctx.rotate(i**Math.PI/);

                ctx.beginPath();

                ctx.moveTo(,);

                ctx.lineTo(,);

                ctx.stroke();

                ctx.closePath();

                ctx.restore()

            }

        // 时针

        ctx.save();

        ctx.lineWidth=;

        ctx.strokeStyle="#000";

        ctx.translate(,);

        ctx.rotate(*Math.PI/);

        ctx.beginPath();

        ctx.moveTo(,);

        ctx.lineTo(,-);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // 分针

        ctx.save();

        ctx.lineWidth=;

        ctx.strokeStyle="#000";

        ctx.translate(,);

        ctx.rotate(*Math.PI/);

        ctx.beginPath();

        ctx.moveTo(,);

        ctx.lineTo(,-);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // 秒针

        ctx.save();

        ctx.lineWidth=;

        ctx.strokeStyle="#000";

        ctx.translate(,);

        ctx.rotate(*Math.PI/);

        ctx.beginPath();

        ctx.moveTo(,);

        ctx.lineTo(,-);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // 表盘中心

        ctx.lineWidth=;

        ctx.storeStyle='red';

        ctx.beginPath();

        ctx.arc(,,3.5,,,false);

        ctx.stroke();

        ctx.fillStyle = 'white';

        ctx.fill();

        ctx.closePath();

        // 设置时针，秒针前面的小圆点

        ctx.translate(,);

        ctx.beginPath();

        ctx.arc(,,,,,false);

        ctx.stroke();

        ctx.fillStyle="white";

        ctx.fill();

        ctx.closePath()

    </script>

</body>

</html>

用canvas画一个时钟的更多相关文章

  1. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  3. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  6. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  8. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  9. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

随机推荐

  1. PHPStorm 配置本地 WebServer 运行 PHP

    目标:PHPStorm 2018.2 通过配置运行 PHP 代码无需安装其它 Web Server File -> Settings菜单找到PHP,设置 CLI Interpreter PHP的 ...

  2. 在ASP.NET Core 3.0中使用Swagger

    1.使用NuGet安装以下依赖: Swashbuckle.AspNetCore 注:版本选最高版本的,我选 5.0 rc4 2.在ConfigureServices添加以下代码 services.Ad ...

  3. js调用网络摄像头

    不支持IE浏览器(需要使用flash插件), 支持移动端, 未经过完全测试 PC端使用的时候, HTML页面需要预留video标签, canvas标签 移动端使用的时候, HTML页面需要预留file ...

  4. Python小练习：StringIO和BytesIO读写操作的小思考

    from io import StringIO; f = StringIO(); f.write('Hello World'); s = f.readline(); print s; 上面这种方法&q ...

  5. SpringBoot+MyBatisPlus+ElementUI一步一步搭建前后端分离的项目(附代码下载)

    场景 一步一步教你在IEDA中快速搭建SpringBoot项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87688277 ...

  6. Use a Multiline Editor for String Properties 对字符串属性使用多行编辑器

    In this lesson, you will learn how to display a multiline editor for string properties. For this pur ...

  7. MySQL之架构简单分析

    上图为MySQL的简易架构图,给您有一个大概的概念,下面我将为您进行进一步的分析. 连接器: 当连接MySQL数据库时,等待的将是MySQL服务端的连接器:连接器的职责是和客户端建立连接.获取权限.维 ...

  8. linux 的swap、swappiness及kswapd原理【转】

    本文讨论的 swap基于Linux4.4内核代码 .Linux内存管理是一套非常复杂的系统,而swap只是其中一个很小的处理逻辑. 希望本文能让读者了解Linux对swap的使用大概是什么样子.阅读完 ...

  9. JUC-9-线程按序交替

    package com.wf.zhang.juc; import java.util.concurrent.locks.Condition; import java.util.concurrent.l ...

  10. Java使用JDBC连接SQL Server数据库|实现学生成绩信息系统

    Java实验四 JDBC 使用SQL Server数据库或者MySQL数据库各自的客户端工具,完成如下任务: (1)创建数据库students: (2)在数据students中创建表scores,包括 ...