<!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. JAVA集合框架（一）-综述

    目录 什么是java集合框架 使用类型安全的容器 集合框架简图 集合类库主要接口简述 Collection接口方法概览 什么是java集合框架 其实就是java类库提供的一套相当完整的各种数据结构的实 ...

  2. 【UR #5】怎样更有力气

    Problem Description 大力水手问禅师:"大师,很多事情都需要用很大力气才能完成,而我在吃了菠菜之后力气很大,于是就导致我现在非常依赖菠菜.我很讨厌我的现状,有没有办法少吃点 ...

  3. Android中在fragment中实现点击按钮事件

    在fragment不能直接进行点击事件,需要放到oncreatActivity中 具体方法如下: 需要注意的是import android.support.v4.app.Fragment;导入的这个包 ...

  4. 用 Python 实现植物大战僵尸代码！

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: marble_xu GitHub地址:https://github ...

  5. js相同的正则多次调用test()返回的值却不同

    项目中文件上传需要验证文件的格式,第一次正常,第二次就验证不通过了.在验证的地方console.log()两遍,发现结果不一样 !!! 正则和文件名都没变,但是两次的验证结果不同. this.reg ...

  6. CSS 让div,span等块级、非快级元素排列在同一行

    让div,span等块级.非快级元素排列在同一行 by:授客 QQ:1033553122 例子:让两个div排列在同一行 给div添加float样式 <!DOCTYPE html> < ...

  7. fluwx使用的问题

    今天搞了下fluwx这个库,也是遇到了很多问题. 问题一:‘包名不对,请检查包名是否与开放平台上填写的一致’ 显示把文档这些看了遍,但是也不是很清楚,还加了下群问别人,主要我没有开发过Android, ...

  8. iOS中点击按钮复制指定内容

    话不多说,直接上图和代码:

  9. iOS11自定义tabBar重影问题

    转载自:(主链接)https://www.jianshu.com/p/1be90349fdb4 https://www.cnblogs.com/coderYu/p/5859638.html 很实用,有 ...

  10. Oracle 快速配置连接服务

    [net Manager配置] oracle客户端连接,或者代码连接时,需要配置本地连接服务. [快速配置] ①找到 tnsnames.ora 文件,使用记事本打开 ② TEST{#服务名} = (D ...