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学习心得分享
Aug 19 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 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
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
Firefox div高度自适应
2009/04/28 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
关于js类的定义
2011/06/28 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
python获取图片颜色信息的方法
2015/03/18 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
简约控的天堂:The Undone
2016/12/21 全球购物
PHP面试题集
2016/12/18 面试题
爱国演讲稿400字
2014/05/07 职场文书
安全生产标语
2014/06/06 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
社区国庆节活动总结
2015/03/23 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
单身证明范本
2015/06/15 职场文书
追悼词范文大全
2015/06/23 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书