html5之Canvas坐标变换应用-时钟实…
来源:互联网 发布:vb计算器在线使用 编辑:程序博客网 时间:2024/06/05 09:27
在上一篇中我们了解html5的Canvas
ff下效果图:
代码:
<</span>html>
<</span>head>
<</span>/head>
<</span>body>
<</span>canvas id ="myCanvas" width ="600" height ="300">你的浏览器还不支持哦<</span>/canvas>
<</span>script type ="text/javascript">
var c = document.getElementByIdx_x( "myCanvas");
var cxt = c.getContext( "2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
cxt.strokeRect( 0, 0, c.width, c.height);
cxt.beginPath();
cxt.strokeStyle = "#00f";
cxt.fillStyle = "#00f";
cxt.arc( 200, 150, 5, 0, 2 * Math.PI, true);
cxt.fill();
cxt.closePath();
cxt.beginPath();
cxt.strokeStyle = "#00f";
cxt.arc( 200, 150, 100, 0, 2 * Math.PI, true);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.translate( 200, 150); //平移原点;
cxt.rotate( -Math.PI / 2);
cxt.save();
for ( var i = 0; i <</span> 60; i ++) {
if (i % 5 == 0) {
// cxt.fillStyle = "#ff0000";
cxt.fillRect( 80, 0, 20, 5);
cxt.fillText( "" + (i / 5 == 0 ? 12 : i / 5), 70, 0);
} else {
// cxt.strokeStyle = "#00f";
cxt.fillRect( 90, 0, 10, 2);
}
//document.getElementByIdx_x("div1").innerText += " " + i;
cxt.rotate(Math.PI / 30);
}
cxt.closePath();
var ls = 0, lm = 0, lh = 0;
function Refresh() {
cxt.restore();
cxt.save();
cxt.rotate(ls * Math.PI / 30);
cxt.clearRect( 5, -1, slen +1, 2+2);
cxt.restore(); cxt.save();
cxt.rotate(lm * Math.PI / 30);
cxt.clearRect( 5, -1, mlen +1, 3+2);
cxt.restore(); cxt.save();
cxt.rotate(lh * Math.PI / 6);
cxt.clearRect( 5, -3, hlen +1, 4+2);
var time = new Date();
var s = ls =time.getSeconds();
var m = lm =time.getMinutes();
var h = lh =time.getHours();
cxt.restore();
cxt.save();
cxt.rotate(s * Math.PI / 30);
cxt.fillRect( 5, 0, slen, 2);
cxt.restore(); cxt.save();
cxt.rotate(m * Math.PI / 30);
cxt.fillRect( 5, 0, mlen, 3);
cxt.restore(); cxt.save();
cxt.rotate(h * Math.PI / 6);
cxt.fillRect( 5, -2, hlen, 4);
}
var MyInterval = setInterval( "Refresh();", 1000);
<</span>/script>
<</span>divid ="div1" style =" background:#00f; "><</span>/div>
<</span>/body>
<</span>/html>
<</span>body>
<</span>div
<</span>/body>
<</span>/html>
- html5之Canvas坐标变换应用-时钟实…
- html5之Canvas坐标变换应用-时钟实例
- html5的canvas坐标变换
- 【Html5每日练习】canvas绘制坐标变换图形
- Html5 Canvas 变换矩阵与坐标变形之间的关系
- Html5 Canvas 变换矩阵与坐标变形之间的关系
- HTML5教程-用Canvas标签绘制坐标变换图形
- Html5 Canvas 变换矩阵与坐标变形之间的关系
- html5学习canvas实例之时钟
- html5之canvas实现模拟简易时钟
- HTML5之Canvas时钟小程序
- HTml5 Canvas 整理笔记之图形变换
- HTML5 CANVAS 时钟
- HTML5 canvas 可拖拽时钟
- html5-canvas-时钟
- HTML5 canvas时钟
- Html5 Canvas 绘制 时钟
- Html5--canvas时钟
- flex4 读书笔记 chapter 3
- flex4 读书笔记 Chapter 4
- 我的博客今天2岁159天了,我领取了…
- html5声频audio和视频video
- html5-Canvas绘图
- html5之Canvas坐标变换应用-时钟实…
- html5-web本地存储
- MFC 获取系统时间
- C++ 异常处理 入门
- 1-5 实验4 串口通信2
- 值得我学习的博客
- a++和++a
- java类的反射机制
- nload实时查看linux服务器网络流量的工具