<!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. 申请免费通配符证书(Let's Encrypt)并绑定IIS

    申请免费通配符证书(Let's Encrypt)并绑定IIS 2018-05-25 18:01 by Giant Liu, 800 阅读, 4 评论, 收藏, 编辑 什么是 Let’s Encrypt ...

  2. zzzp0371 属于本人

    所有关于zzzp0371账号,属于本人 如有问题,请在此留言联系我

  3. boost::asio::io_context类

    //有个疑惑: 向io_context对象中提交的任务只能被顺序化的执行. //下面这个构造函数表明可以运行多线程啊..... /** * Construct with a hint about th ...

  4. scala 基本类型和操作

    Scala基本类型 Scala中的基本数据类型如下图:  (来源:Programming in scala) 从上表中可以看出,Scala的基本数据类型与Java中的基本数据类型是一一对应的,不同的是 ...

  5. Bisecting KMeans (二分K均值)算法讲解及实现

    算法原理 由于传统的KMeans算法的聚类结果易受到初始聚类中心点选择的影响,因此在传统的KMeans算法的基础上进行算法改进,对初始中心点选取比较严格,各中心点的距离较远,这就避免了初始聚类中心会选 ...

  6. centos6.5网络虚拟化技术

    一.配置KVM虚拟机NAT网络 1.创建脚本执行权限 下面是NAT启动脚本 # vi /etc/qemu-ifup-NAT 赋予权限 # chmod +x /etc/qemu-ifup-NAT 下载镜 ...

  7. 家庭版Windows设置远程连接

    家庭版Windows设置远程连接1. windows+R 打开运行,输入 regedit 打开注册表 2.依次打开路径 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsof ...

  8. CRM 权限内可查看的记录数

    CREATE FUNCTION dbo.fn_GetFilteredIdsSqlString ( ) , ) , ) ) RETURNS NVARCHAR(max) AS BEGIN ) SET @s ...

  9. Shiro 权限注解

      Shiro 权限注解:   Shiro 提供了相应的注解用于权限控制,如果使用这些注解就需要使用AOP 的功能来进行 判断,如Spring AOP:Shiro 提供了Spring AOP 集成用于 ...

  10. 图像生成-VAE简介

    VAE(Variational Autoencoder)   生成式模型 理论: 基于贝叶斯公式.KL散度的推导 1. 自动编码器的一般结构 2. 产生一幅新图像 输入的数据经过神经网络降维到一个编码 ...