canvas 时钟案例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#c{
background:#ccc;
}
</style>
</head>
<body>
<canvas id="c" width="400" height="400"></canvas>
</body>
</html>
<script>
var cd=document.getElementById("c");
var c=cd.getContext("2d"); c.save();
c.arc(200,200,100,0,2*Math.PI);
c.stroke();
c.restore(); //绘制秒盘
c.save();
c.translate(200,200);
c.beginPath();
for(var i=0;i<60;i++){
c.moveTo(95,0);
c.lineTo(100,0);
c.rotate(6*Math.PI/180);
}
c.closePath();
c.stroke();
c.restore(); //绘制时盘 c.save();
c.translate(200,200);
c.beginPath();
for(var i=0;i<12;i++){
c.moveTo(90,0);
c.lineTo(100,0);
c.rotate(30*Math.PI/180);
}
c.closePath();
c.stroke();
c.restore(); fn(); function fn() { var time, h, m, s;
time = new Date();
h = time.getHours();
m = time.getMinutes();
s = time.getSeconds();
h = h - 12;
//时针；
c.save();
c.beginPath();
c.lineWidth = "3";
c.lineCap = "round";
c.moveTo(200, 200);
c.arc(200, 200, 50, (-90 + h * 30+(m/2)) * Math.PI / 180, (-90 + h * 30+(m/2)) * Math.PI / 180);
c.closePath();
c.stroke();
c.restore(); //分针
c.save();
c.beginPath();
c.lineWidth = "1";
c.lineCap = "round";
c.moveTo(200, 200);
c.arc(200, 200, 62, (-90 + m * 6) * Math.PI / 180, (-90 + m * 6) * Math.PI / 180);
c.closePath();
c.stroke();
c.restore(); // 秒针 c.save();
c.beginPath();
c.moveTo(200, 200);
c.arc(200, 200, 62, (-90 + s * 6) * Math.PI / 180, (-90 + s * 6) * Math.PI / 180);
c.closePath();
c.stroke();
c.restore();
} var tsd=setInterval(function(){
c.save();
c.clearRect(130,130,140,140);
fn();
c.restore();
},1000)
</script>
canvas 时钟案例的更多相关文章
- Coffeescript实现canvas时钟
前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...
- 》》canvas时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
- Canvas 入门案例
五. Canvas 入门案例 1. canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...
- 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- Canvas - 时钟绘制
导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...
- html5 canvas时钟
基础知识点: canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
- canvas时钟效果
话不多说,直接上代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/x ...
随机推荐
- ES5中的继承
继承 在面向对象的语言中, 大多语言都支持两种继承方式: 接口继承 和 实现继承, 接口继承 只继承方法签名, 实现继承 才继承实际的方法, ECMAScript 值支持 实现继承, 今天我们来谈谈实 ...
- bootstrap中的横的列
col-md-6都是可以嵌套的,所以12列都是虚拟的 所以bootstrap是怎么完成的?都是通过绝对的像素值吗?还是自动计算出了本区域的像素数,然后设置的? 看样子应该是后者,所以整个bootstr ...
- 通过编写串口助手工具学习MFC过程——（六）添加Edit编辑框控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- A广搜
<span style="color:#330099;">/* A - 广搜 基础 Time Limit:2000MS Memory Limit:65536KB 64b ...
- numpy.random.randn()和numpy.random.rand()
1 numpy.random.rand() (1)numpy.random.rand(d0,d1,…,dn) rand函数根据给定维度生成[0,1)之间的数据,包含0,不包含1 dn表格每个维度 返回 ...
- spark(3)
0.spark -------------------------------------------- transformation map filter repartition spark核心AP ...
- MIT-线性代数公开课
本博客是学习MIT-线性代数笔记,Gilbert Strang大神讲的通俗易懂,感兴趣的可以观看视频 其中习题集请点击 01)方程组的几何解释 02)矩阵消元 03)乘法和逆矩阵 04)A的LU分解 ...
- java集合类图详解
- 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。
class Solution { public int[] twoSum(int[] nums, int target) { for (int i = 0; i < nu ...
- layui 动态添加 表格数据
静态表格: <table class="layui-table" id="table" lay-filter="table"> ...