<!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. linux 系统下有sda和hda的硬件设备分别代表什么意思

    linux 系统下有sda和hda的硬件设备分别代表什么意思/dev/sda1 # SCSI设备,sda,sdb,sdc,三块盘,1,2,3代表分区(PV)/dev/sda2/dev/sdb1/dev ...

  2. 我的Netty笔记

    pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  3. PAT 甲级 1001 A+B Format (20)（20 分）

    1001 A+B Format (20)(20 分) Calculate a + b and output the sum in standard format -- that is, the dig ...

  4. itertools库 combinations() 和 permutations() 组合 和 排列选项的方法

    combinations方法重点在组合,permutations方法重在排列. combinations和permutations返回的是对象地址,原因是在python3里面,返回值已经不再是list ...

  5. java1.8新特性（四 创建 stream对象）

    java1.8 提供了 stream对象 可以用作 对 集合 数组的 一系列操作,都是基于lambda 表达式 ,所以得先熟悉lambda 表达式 集合创建stream对象 // 1.集合创建stre ...

  6. Web jsp开发学习——点击菜单页面切换

      两个网页使用同一个head,在点击“首页”后,head的“首页”变成绿色,点击“新闻”后,head的“新闻”变成绿色,head的“首页”恢复原来的颜色   head.jsp <%@ page ...

  7. spring 定时任务 scheduled Cron表达式

    转载:https://blog.csdn.net/u011789653/article/details/51153536 可以借鉴:https://www.cnblogs.com/softidea/p ...

  8. [UE4]修改枪支碰撞体

    一.Simple Collision:显示简单碰撞体,Comlex Collision:显示复杂碰撞体 二.添加简单和复杂碰撞体 三.自动生成复杂精确的碰撞体

  9. sqlserver 数据简单查询

    use StudentManageDB go select StudentName as 姓名,Gender as 性别,出生日期=birthday from Students where Gende ...

  10. C# DataReader

    //1 连接字符串 string connectionString = "server=127.0.0.1;integrated security=true;database=MSPetSh ...