//code

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

body,html{

width: 100%;

height: 100%;

background: url(images/deadpool-bg.png);

background-size: 100% 100%;

overflow: hidden;

}

#myCanvas{

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

background: /*aqua*/;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="600" height="600">您的浏览器不支持canva</canvas>

<script type="text/javascript">

var Mycanvas=document.getElementById('myCanvas');

var canvas=Mycanvas.getContext('2d')

function drawClock(){

canvas.clearRect(0,0,610,610)

// 获取当前时间

var currentTime=new Date();

var hour=currentTime.getHours();

var minutes=currentTime.getMinutes();

hour=hour+minutes/60

var second=currentTime.getSeconds();

canvas.beginPath();

canvas.lineWidth=5

canvas.strokeStyle='aqua';

canvas.arc(300,300,295,0,Math.PI*2,false);

canvas.stroke();

//画刻度线

for(let i=0;i<60;i++)

{

canvas.save();

canvas.translate(300,300);

canvas.rotate(i*6*Math.PI/180)

canvas.beginPath();

canvas.moveTo(0,270);

canvas.strokeStyle='red';

canvas.lineTo(0,292);

canvas.lineWidth=2;

canvas.stroke();

canvas.restore()

}

for(let i=0;i<12;i++)

{

canvas.save();

canvas.translate(300,300);

canvas.rotate(i*30*Math.PI/180)

canvas.beginPath();

canvas.moveTo(0,250);

canvas.strokeStyle='red';

canvas.lineTo(0,292);

canvas.lineWidth=3;

canvas.stroke();

canvas.restore()

}

//时针

canvas.save();

canvas.translate(300,300);

canvas.rotate(hour*30*Math.PI/180)

canvas.beginPath();

canvas.moveTo(0,15);

canvas.strokeStyle='red';

canvas.lineTo(0,-200);

canvas.lineWidth=3;

canvas.stroke();

canvas.restore()

//分针

canvas.save();

canvas.translate(300,300);

canvas.rotate(minutes*6*Math.PI/180)

canvas.beginPath();

canvas.moveTo(0,-240);

canvas.strokeStyle='red';

canvas.lineTo(0,10);

canvas.lineWidth=3;

canvas.stroke();

canvas.restore()

//miao针

canvas.save();

canvas.translate(300,300);

canvas.rotate(second*6*Math.PI/180)

canvas.beginPath();

canvas.moveTo(0,-290);

canvas.strokeStyle='yellow';

canvas.lineTo(0,20);

canvas.lineWidth=2;

canvas.stroke();

//小圈圈⭕1️

canvas.beginPath();

// canvas.rotate(second*6*Math.PI/180)

canvas.arc(0,0,5,0,Math.PI*2,false)

canvas.fillStyle='black';

canvas.fill();

canvas.stroke();

//小圈圈⭕2️

canvas.beginPath();

// canvas.rotate(0)

canvas.arc(0,-250,5,0,Math.PI*2,false)

canvas.fillStyle='black';

canvas.fill();

canvas.strokeStyle='#fff'

canvas.stroke()

canvas.restore()

}

drawClock()

setInterval(function(){

drawClock()

},1000)

</script>

<script src="./jquery-2.1.1.min.js"></script>

</body>

</html>

基于canvas的电子始终的更多相关文章

  1. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  2. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

  3. 7个华丽的基于Canvas的HTML5动画

    说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...

  4. 基于jquery结婚电子请柬特效素材

    分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  5. 微信小程序-基于canvas画画涂鸦

    代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 基于canvas的仪表盘效果

    概述 基于Canvas实现的仪表盘及效果.通过配置参数,可以任意修改仪表盘颜色,刻度,动画过渡时间等,满足不同场景下的使用.同时使用原生的Canvas,也是学习Canvas的很好的例子. 详细 代码下 ...

  7. 基于canvas实现钟表

    原理说明 1.通过arc方法实现钟表外环: 2.通过line实现钟表时针,分针,秒针和刻度标志的绘制,基于save和restore方法旋转画布绘制不同角度的指针: 3.通过font方法实现在画布上绘制 ...

  8. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  9. 基于canvas实现的高性能、跨平台的股票图表库--clchart

    什么是 ClChart? ClChart是一个基于canvas创建的简单.高性能和跨平台的股票数据可视化开源项目.支持PC.webApp以及React Native和Weex等平台.在React Na ...

随机推荐

  1. 让WebBrowser在非兼容模式下运行

    32 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_ ...

  2. 黄聪：ffmpeg参数说明（转载）

    ffmpeg.exe -i F:\闪客之家\闪客之歌.mp3 -ab 56 -ar 22050 -b 500 -r 15 -s 320x240 f:\11.flv ffmpeg -i F:\01.wm ...

  3. 【ActiveMQ】之安全机制(二)客户端连接安全

    配置完管控台的安全之后,我们还要配置客户端连接安全,否则大家都可以往MQ上发送消息,这样太危险! 根据官方文档,http://activemq.apache.org/security.html Act ...

  4. Hard commits, soft commits and transaction logs

    “Hard commits are about durability, soft commits are about visibility“  Transaction Logs 首先介绍下solrcl ...

  5. Android adb logcat输出日志显示不全解决方案

    在终端中使用adb logcat打印服务器json数据,如果返回数据过大超过4000字节(4K)即会截断不显示 原因:logcat在对于message的内存分配大概是4k左右.所以超过的内容都直接被丢 ...

  6. pandoc 基本使用

    pandoc –s 输入文件.后缀 –o 输出文件.后缀

  7. hadoop长时间运行后，stop-all.sh报错

    报错现象: hadoop在stop-all.sh的时候依据的是datanode上的mapred和dfs进程号. 而默认的进程号保存在/tmp下,linux默认会每 隔一段时间(一般是一个月或者7天左右 ...

  8. Java学习——this、this()、super 和 super()的使用

    编写程序:说明 this.super 和 super()的用法.程序首先定义 Point(点)类,然后创建点的子类 Line(线)),最后通过 LX7_3 类输出线段的长度. package Pack ...

  9. 静态路由、Track与NQA联动配置举例

    原文: http://www.h3c.com/cn/d_201708/1018729_30005_0.htm#_Toc488338732 1.6.4  静态路由.Track与NQA联动配置举例 1. ...

  10. UE4中多种颜色轮廓线的后期处理

    转自:http://blog.csdn.net/pizi0475/article/details/50396277 随着近来虚幻引擎4的一些变化,渲染多种颜色的轮廓线已经可以实现了!通过自定义模板,类 ...