【JavaScript+svg绘制的一个动态时钟】的更多相关文章

JavaScript+svg绘制的一个动态时钟

结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head> <body onload="updateTime();"> <script type="text/javascript"> function updateTime(){ //更新svg时钟来显示当前时间 var now =new Dat…

JavaScript+svg绘制的一个饼状图

结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,45],640,400,200,200,150, ["red","blue","yellow","green"], ["North","South","East",&quo…

环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SVG在画弧线方面是行家呀,另外Canvas也是极好的选择.但是规定了不能用SVG和Canvas,我想还可以使用CSS3的clip和rotate属性,但当时脑抽的我竟记不起clip的语法袅(囧~).笔试结束后,便去查clip属性的使用,总结了实现环形进度条的方法,于是便有了下文. 图1:动态时钟样式  …

canvas ：原生javascript编写动态时钟

canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,width/2) 绘制表盘 function jiang(){ r = width/2 g.clearRect(0, 0, 600, 600); g.save(); g.translate(r, r); g.rotate(-Math.PI / 2); //分钟刻度线 for(var i = 0; i <…

【应用】SVG动态 时钟

没有做秒针,只做了分针和时针,5分钟以后来看应该可以看到效果╮(╯-╰)╭ <!DOCTYPE html> <html> <head> <title></title> <script> function updateTime(){ //更新SVG时钟来显示当前时间 var now=new Date(); //当前时间 var min=now.getMinutes(); //分钟 var hour=(now.getHours()%12)…

svg绘制一个简单地饼图

一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width…

iOS 绘制一个表盘时钟，秒针效果可以“扫秒/游走”

最近自己 也尝试写了一个表盘时钟,初衷源于等车时候一个老奶奶问时间,我打开手机,时间数字对我来说相对敏感,但是老奶奶是看不清的,我想识别 还是看表盘 老远 看时针分针角度就可以识别当前时间. 于是我想写一个表盘时钟. 效果图: 基本原理,基本逻辑和其他时钟大同小异:定时器 repeat 获取当前时分秒,计算旋转角度,渲染UI. 几个注意的关键点,重点,难点. 一.旋转角度 以表盘为圆心,即 时针分针秒针绘制的矩形UI 锚点 anchorPoint. (默认锚点 是矩形中心点 anchorPoin…

用canvas绘制一个简易时钟

在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数字三部分. 2.表盘是个圆,这个简单. 3.绘制指针时,需要先获取到系统时间,然后找到时间和角度的关系. 4.然后利用画圆函数,把起始和终点设为同一角度,即可画出以圆心为起点的射线(指针)了.  二. 接下来,我们再分析一下,绘制时钟需要用到的函数. 1.arc(x, y, r, start, st…

python+pygame制作一个可自定义的动态时钟和详解

1.效果图 2.完整代码 #第1步:导出模块 import sys, random, math, pygame from pygame.locals import * from datetime import datetime, date, time #第2步:初始化和窗扣大小的设置 pygame.init() #这一步必须放在模块之后,对pygame很重要 #screen = pygame.display.set_mode((800, 600)) #定义窗口大小 screen = pygame…

18个超有趣的SVG绘制动画赏析

SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧. 1.HTML5 SVG实现会跳舞的花朵 4种跳舞心情 这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花.首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯…