//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. String[]字符串数组，按字典顺序排列大小

    package ltb6w1; public class WordSort1 { private String[] a= {"hello","world",&q ...

  2. windows 下跟踪日志的几个工具总结

    1.baretailpro.exe 2.wintail.exe 3.vim(using tail bundle plugin) 4.Notepad++ (Plugin->Plugin Manag ...

  3. Python 里面什么时候用一个=，什么时候用两个=

    赋值用=                                                                   i != j != k   >>>> ...

  4. react组件的数据传递

    在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信. 1, ...

  5. MySQL学习----索引的使用

    一.什么是索引?为什么要建立索引? 索引用于快速找出在某个列中有一特定值的行,不使用索引,MySQL必须从第一条记录开始读完整个表,直到找出相关的行,表越大,查询数据所花费的时间就越多,如果表中查询的 ...

  6. BBC曝光：每天10000步，竟是商家的营销骗局

    原文: https://new.qq.com/cmsn/20190112A14JRD00 导语:日本人平均每天行走3500-5000步,于是计步器公司就想,既然这么个数值大部分人都能达到,如果把平均值 ...

  7. ORM多表操作之创建关联表及添加表记录

    创建关联表 关于表关系的几个结论 (1)一旦确立表关系是一对多:建立一对多关系----在多对应的表中创建关联字段. (2)一旦确立表关系是多对多:建立多对多关系----创建第三张关系表----id和两 ...

  8. T-SQL 带参数存储过程

    创建带参数的存储过程 use StudentManager go if exists(select * from sysobjects where name='usp_ScoreQuery4') dr ...

  9. SCCM2012 R2实战系列之七：软件分发（exe）

    在上一章节中,我们完成了SCCM 2012客户端代理软件的安装,现在就可以为客户端来部署应用程序了. SCCM2012增加了应用程序分发,同时保留了SCCM 2007里的包分发.应用程序分发可以直接对 ...

  10. Postgresql 珍藏级文章

    https://wiki.postgresql.org/wiki/Tuning_Your_PostgreSQL_Server  如何设置参数值 https://www.cnblogs.com/zhao ...