//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. python 类继承与子类实例初始化

    From: https://blog.csdn.net/cs0301lm/article/details/6002504?utm_source=blogxgwz4 [ 先贴参考书籍原文(中文英文对照) ...

  2. gulp学习总结

    一.gulp使用-博客推荐: http://www.sheyilin.com/2016/02/gulp_introduce/ 二.gulp的作用 gulp是一个前端构建工具,它是一个工具框架,可以通过 ...

  3. 单元素枚举类型singleton模块

    public enum Elvis { INSTANCE; public void leaveTheBuilding() { System.out.println("Whoa baby, I ...

  4. 使用Apache Mesos和Consul实现服务的注册发现

    为保证基于Docker应用程序和服务都具有高性能和可用性,设计出一种具有服务发现,高可用性和容错能力的解决方案非常重要. 我们使用Apache Mesos 和Mesosphere的 Marathon实 ...

  5. VS2008--VS2013 各种版本官方下载地址

    很多刚入门的学生都不知道从哪里下载Visual studio 编译器 , 我特闲的纯手工整理了下 Visual Studio 2005 Professional 官方90天试用版 英文版:http:/ ...

  6. SkipList理解

    记下自己对跳表SkipList的理解. SkipList采用空间换时间的思想,通过增加数据间的链接,达到加快查找速度的目的. 数据库LevelDB和RocksDB中用到了SkipList,Redis中 ...

  7. 配置允许匿名用户登录访问vsftpd服务，进行文档的上传下载、文档的新建删除等操作

    centos7环境下 临时关闭防火墙 #systemctl stop firewalld 临时关闭selinux #setenforce 0 安装ftp服务 #yum install vsftpd - ...

  8. Jmeter（三十二）Jmeter Question 之 “自定义函数开发”

    “技术是业务的支撑”,已经不是第一次听到这句话,因为有各种各样的需求,因此衍生了许多各种各样的技术.共勉! 前面有提到提到过Jmeter的安装目录结构,也提到Jmeter的常用函数功能,有部分工作使用 ...

  9. [UE4]隐藏对象Set Visibility

    Propagate to Children:是否遍历子对象(用来设置子对象可见性)

  10. Windows Server 2012 R2 无法启用Microsoft .NET Framework 3.5 功能

    1 在新windows 2012 R2 上安装SQL 2014 ,提示需要安装 .NET Framework 3.5 2 在添加角色和功能--功能--.NET Framework 3.5,然后失败 3 ...