<!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题库——Chapter1 计算机、程序和Java概述

    1)________ is the physical aspect of the computer that can be seen. A)Hardware B) Operating system C ...

  2. Python语法易错点

    列表.数组赋值 a = [1,6] b = a * 2 b[0] = -9999 print(a) print(b) [1, 6] [-9999, 6, 1, 6] a = [1,6] b = a b ...

  3. 为什么AlertDialog要使用Builder来构建呢

    为什么 AlertDialog 使用Builder 模式呢? 首先说句废话,因为 AlertDialog 太过复杂,内部参数太多,然后不使用构建者模式那么 AlertDialog 的构造方法就可能是: ...

  4. Spring Boot 2 + jpa + mysql例子

    Spring Data框架为数据访问提供了一个通用的模型,无论访问哪种数据库,都可以使用同样的方式,主要有以下几个功能:(1)提供数据与对象映射的抽象层,同一个对象,可以被映射为不同数据库的数据:(2 ...

  5. pymysql增删改查操作

    表结构 CREATE TABLE `students` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(20) DEFA ...

  6. 如何使用 TRANSPORTABLE = ALWAYS 将PDB移回Non-CDB (Doc ID 2027352.1)

    How to Move a PDB Back to a Non-CDB Using TRANSPORTABLE=ALWAYS (Doc ID 2027352.1) APPLIES TO: Oracle ...

  7. kubernets过滤pod标签（labels）

    版权声明:本文为博主原创文章,支持原创,转载请附上原文出处链接和本声明. 本文地址:https://www.cnblogs.com/wannengachao/p/12074399.html 1.查看p ...

  8. WPF 精修篇 样式继承

    原文:WPF 精修篇 样式继承 这个 是新知识 样式可以继承 <Style x:Key="TextBlockStyleBase" TargetType="{x:Ty ...

  9. Java连载47-多态基础语法、作用

    一.多态的语法 1.两个类之间没有继承关系的,使用多态是不能编译的. 2.无论向上还是向上转型,都需要有继承关系. 3.什么时候需要向下转型? 当调用的方法或者属性是子类型特有的,在父类型中不存在,就 ...

  10. 为什么 Java 不是纯面向对象语言？

    什么是纯面向对象语言? 纯面向对象语言或完全面向对象语言是指完全面向对象的语言,它支持或具有将程序内的所有内容视为对象的功能.它不支持原始数据类型(如 int,char,float,bool 等).编 ...