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实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 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 Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
JavaScript延迟加载
2021/03/09 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
js切换光标示例代码
2013/10/10 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
聊聊Python中的pypy
2018/01/12 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python编程中类与类的关系详解
2019/08/08 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
加多宝凉茶广告词
2014/03/18 职场文书
品牌推广策划方案
2014/05/28 职场文书
北京申奥口号
2014/06/19 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
刑事撤诉申请书
2015/05/18 职场文书
单身证明格式样本
2015/06/15 职场文书
2015大一新生军训感言
2015/08/01 职场文书
交通安全教育主题班会
2015/08/12 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书