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打造磨砂玻璃背景效果
Sep 28 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
单位速度在实战中的运用
2020/03/04 星际争霸
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP默认安装产生系统漏洞
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
javascript日期格式化示例分享
2014/03/05 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python的range和linspace使用详解
2019/11/27 Python
详解KMP算法以及python如何实现
2020/09/18 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
物流仓管员工作职责
2014/01/06 职场文书
公司活动邀请函
2014/01/24 职场文书
大学生暑期实践感言
2014/02/26 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
投诉书格式范本
2015/07/02 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏