html5之Canvas路径绘图、坐标变换应用实例


Posted in HTML / CSS onDecember 26, 2012

在上一篇中我们了解html5的Canvas ,在这一篇中不用多说,写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate),以及html5 Canvas的路径绘图,beginPath,closePath,rect,arc等,还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制,save,restore。
多的也不说了,直接上代码,有不解的欢迎提问,以及对我的建议指教都可以。
ff下效果图
html5之Canvas路径绘图、坐标变换应用实例 
代码

复制代码
代码如下:

<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>
<script type="text/javascript">
var c = document.getElementById("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 < 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.getElementById("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);
</script>
<div id="div1" style=" background:#00f;"></div>
</body>
</html>
HTML / CSS 相关文章推荐
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 #HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 #HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 #HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 #HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 #HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 #HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 #HTML / CSS
You might like
PHP 日,周,月点击排行统计
2012/01/11 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
js对象基础实例分析
2015/01/13 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
称象教学反思
2014/02/03 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS