<!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. wsl(Windows Subsystem for Linux)安装简易指南

    1. 在“启用或关闭Windows功能”窗口中打开“适用于Linux的Windows子系统”: 2. 让你的Windows更新程序将你的Windows更新到最新版本: 3. 在Microsoft St ...

  2. 数据仓库专题18-数据建模语言IDEF(转载)

    1引言 IDEF的含义是集成计算机辅助制造(Integrated Computer-AidedManufacturing,ICAM)DEFinition.最初的IDEF方法是在美国空军ICAM项目建立 ...

  3. Elasticsearch Internals: Networking Introduction An Overview of the Network Topology

    This article introduces the networking part of Elasticsearch. We look at the network topology of an ...

  4. JPanel添加键盘监听事件

    因为在自己的游戏需求中谢了要用键盘控制飞机的移动,所以用到键盘监听事件,但是使用了JPanel之后添加了键盘监听事件,按相应的方向键飞机并没有反应.但是如果是为JFrame的内容面板加则会有反应. 为 ...

  5. 推荐两个小工具MediaInfo 和 netpersec

    [转载请注明出处]:http://blog.csdn.net/longlong530 流媒体服开发的时候常用的两个工具, 1. MediaInfo     下载路径:(http://w.x.baidu ...

  6. appium工具 录制的方法

    参考: https://www.jianshu.com/p/5eef1bfa42ae

  7. android scrollview listview显示不全

    原来处理方法是重写ListView import android.content.Context; import android.util.AttributeSet; import android.v ...

  8. [UE4]在当前角色正前方2米处生成一个Actor

  9. Java中涉及线程和并发相关的内容

    1:线程池 与每次需要时都创建线程相比,线程池可以降低创建线程的开销,这也是因为线程池在线程执行结束后进行的是回收操作,而不是真正的 销毁线程. 2:ReentrantLock ReentrantLo ...

  10. HTTP协议的简单解析

    超文本传输协议(HTTP,HyperText Transfer Protocol)是用于从服务器传输超文本到本地浏览器的传输协议,是应用最为广泛的网络协议.B/S网络架构的核心是HTTP,掌握HTTP ...