<!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. 编译安装MySQL-5.7.13

    编译安装MySQL-5.7 cmake的重要特性之一是其独立于源码(out-of-source)的编译功能,即编译工作可以在另一个指定的目录中而非源码目录中进行,这可以保证源码目录不受任何一次编译的影 ...

  2. DS二叉树--叶子数量

    题目描述 计算一颗二叉树包含的叶子结点数量. 提示:叶子是指它的左右孩子为空. 建树方法采用“先序遍历+空树用0表示”的方法,即给定一颗二叉树的先序遍历的结果为AB0C00D00,其中空节点用字符‘0 ...

  3. "上市时间:&nbsp;2014&#24180;&#31179;&#20908;&#23395;" unicode十进制编码转中文

    "上市时间: 2014年秋冬季" unicode十进制编码转中文 System.Web.HttpUtility.HtmlDecode(tmp);

  4. 【springboot】之整合ActiveMQ

    1.引入依赖的jar <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...

  5. Java学习——加法器

    package cys; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.aw ...

  6. 项目启动时报错Instantiation of bean failed; nested exception is java.lang.ExceptionInInitializerError

    https://www.cnblogs.com/liuyp-ken/p/7911536.html 解决过程: 1.检查配置,反反复复看了很多遍,确认没有问题. 2. 网上找了很多资料,类似的问题很多, ...

  7. mybatis 报错Result Maps collection does not contain value for java.lang.Integer

    重点:报错的方法和xml文件不一定是错误的位置,如果有多个xml文件,必须检查所有的文件 搜索  resultMap="java.lang.Integer" 找到对应的文件,改为  ...

  8. etcd 命令行(转)

    原文 https://www.cnblogs.com/breg/p/5756558.html 比较重要的配置 -name 节点名称,默认是UUID-data-dir 保存日志和快照的目录,默认为当前工 ...

  9. vue 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

    <template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...

  10. Mysql之 配置文件读取顺序

    On Unix, Linux and Mac OS X, MySQL programs read startup options from the following files, in the sp ...