<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Canvas</title>

    <script type="text/javascript" src="jQuery.js"></script>

</head>

<style type="text/css">

    body {

        padding: 0;

        margin: 0;

        background: black;

    }

    #canvas {

        background: white;

        margin: 100px 0 0 300px;

    }

    #canvas>span {

        color: white;

        font-size: 14px;

    }

</style>

<body>

    <canvas id="canvas" width="600" height="500">

    <span>您的浏览器不支持</span>

</canvas>

</body>

</html>

<script type="text/javascript">

    /*获取绘制环境*/

    var oc = $('#canvas')[0];

    canvas = oc.getContext('2d');

    /*定义圆心和半径*/

    var x = 250, y = 250, r = 150;

    var time = setInterval(function() {

        ClocksWatche();

    }, 1000);

    function ClocksWatche() {

        /*清理画布*/

        canvas.clearRect(0, 0, oc.width, oc.height);

        /*开始绘制*/

        canvas.beginPath();

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

            /*绘制起始点移到圆心*/

            canvas.moveTo(x, y);

            /*根据圆心和半径每6度绘制一次(圆心横坐标,圆心纵坐标,其实弧度,结束弧度,是否逆时针)*/

            canvas.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);

        }

        /*连接至起始点*/

        canvas.closePath();

        /*画线*/

        canvas.stroke();

        /*设置线的粗细*/

        canvas.lineWidth = 3;

        /*开始绘制*/

        canvas.beginPath();

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

            /*绘制起始点移到圆心*/

            canvas.moveTo(x, y);

            /*根据圆心和半径没30度绘制一次*/

            canvas.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);

        }

        /*连接至起始点*/

        canvas.closePath();

        /*画线*/

        canvas.stroke();

        /*设置填充颜色*/

        canvas.fillStyle = 'white';

        canvas.beginPath();

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 14 / 15, 0, 360, false);

        canvas.closePath();

        canvas.fill();

        var loacalDate = new Date();

        var hours = loacalDate.getHours();

        var minute = loacalDate.getMinutes();

        var sencond = loacalDate.getSeconds();

        hours = (hours * 30 - 90 + minute / 2) * Math.PI / 180;

        minute = (minute * 6 - 90) * Math.PI / 180;

        sencond = (sencond * 6 - 90) * Math.PI / 180;

        canvas.beginPath();

        canvas.lineWidth = 5;

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 8 / 15, hours, hours, false);

        canvas.stroke();

        canvas.beginPath();

        canvas.lineWidth = 3;

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 10 / 15, minute, minute, false);

        canvas.stroke();

        canvas.beginPath();

        canvas.lineWidth = 1;

        canvas.moveTo(x, y);

        canvas.arc(x, y, r * 14 / 15, sencond, sencond, false);

        canvas.stroke();

    }

</script>

HTML5 Canvas 小例子 旋转的时钟的更多相关文章

  1. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  2. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  6. html5 canvas围绕中心点旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html5 canvas防微博旋转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. WPF Canvas小例子

    源码下载:DraggingElementsInCanvas_demo.rar

  9. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

随机推荐

  1. live555源码学习笔记之TaskScheduler

    今天抽空研究了下live555的任务实现: TaskScheduler分为三种任务:socket handler,event handler,delay task.这三种任务的特点是,前两个加入执行队 ...

  2. kafka服务自动关闭

    解决方法: kafka启动的时候添加守护进程 bin/kafka-server-start.sh -daemon ./config/server.properties & 问题原因: 待补充. ...

  3. Python——字符串2.0（实验）（python programming）

    直接打s,是程序员看到的:打print(),是用户看到的 列表 ] #列表索引,与数组唯一不同:等号左端可修改 转载自:https://www.cnblogs.com/wwwwwei/p/104816 ...

  4. Java-Runoob-高级教程-实例-数组：11. Java 实例 – 删除数组元素

    ylbtech-Java-Runoob-高级教程-实例-数组:11. Java 实例 – 删除数组元素 1.返回顶部 1. Java 实例 - 删除数组元素  Java 实例 以下实例演示了如何使用 ...

  5. [转] 关于 Ceph PG

    本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...

  6. 廖雪峰Java3异常处理-2断言和日志-3使用Commons Logging

    Commons Logging是Apache创建的日志模块: 可以挂接不同的日志系统 可以通过配置文件指定挂接的日志系统 自动搜索并使用Log4j 如果Log4j不存在,使用JDK Logging(J ...

  7. 电脑不能上网win7 解决办法

    情况一览: 电脑连的是WIFI 手机能上,局域网其他电脑能上 电脑浏览器打不开网页 问题解决: //win+R 快捷键进入cmd 1.ipconfig 看电脑有没有ip 2.ipconfig nslo ...

  8. mongodb windows的安装方法和添加到任务管理器中、检测是否成功、增删改查命令

    转: mongodb安装方法: https://blog.csdn.net/heshushun/article/details/77776706        mongodb检测安装成功 .以及增删改 ...

  9. [UE4]The global shader cache file missing 运行错误解决办法

    UE4项目在VS中对项目代码编译时报如错,找了好久在UE4论坛上查到了别人的解决方案,贴出来仅供大家参考. 看到一位开发者解释出错的原因如下: There are a number of build ...

  10. Spark Streaming实时数据分析

    [kfk@bigdata-pro01 softwares]$ sudo rpm -ivh nc-.el6.x86_64.rpm Preparing... ####################### ...