<!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. ef实现一次查询多个聚合函数的字段

    想用ef来写一个统计字段的语句,如下所示 select sum(price) as price_total, sum(amount) as amount_total from table1 发现似乎实 ...

  2. WebGL-3D地图大俯仰角的雾化处理

    腾讯位置服务Javascript API GL版,是基于WebGL技术打造的地图API库,使得浏览器环境下也可实现APP端的应用体验,提供2D/3D模式,运行流畅.当前版本提供地图展示.标记.信息窗口 ...

  3. 简单的jquery表单验证+添加+删除+全选/反选

    //布局 <body> <h4><a href="#">首页</a>><a href="#"> ...

  4. 未能找到元数据文件**.dll解决办法

    解决方案里有很多项目.生成时提示100多个错误,都是未能找到元数据文件**.dll. 那就清理一下解决方案,一个一个来吧. 生成GateWay.Utilities项目时,虽然提示成功了,却发现bin/ ...

  5. MATLAB实例：对称双随机矩阵

    MATLAB实例:对称双随机矩阵 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 双随机矩阵(doubly stochastic matrix):元素属 ...

  6. echarts常用说明

    import { Injectable } from '@angular/core'; //模板option通用 let fff7 = '#fff'; //字体统一颜色rgba(255,255,255 ...

  7. [HDU6288]Tree

    题目 题解 首先读题就很成问题....英语咋办呐!!! 直接考虑有点复杂,直接分析每一条边能否被选入最终答案.对于这条边,看看他的\(size[v]\) 与 \(n-size[v]\) 是否都大于等于 ...

  8. HDU1075 What Are You Talking About(map)

    传送门 题目大意:一个单词对应另一个单词 翻译一段文字 题解:stl map走一波 代码: #include<iostream> #include<map> #include& ...

  9. [LeetCode] 42. Trapping Rain Water 收集雨水

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  10. for循环用了那么多次，但你真的了解它么？

    一.基础的for循环 0.使用while也是一种循环方式,此处探究for相关的循环,就不做拓展了. 1.遍历数组的时候,初学时是使用的如下样式的for循环: for(int i=0;i<a.le ...