//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. C/C++基础----关联容器

    基本属性 与顺序容器的差别,按照关键字来保存和访问,而顺序容器是按照容器中的位置来顺序保存和访问. map:每个元素是一对键值(key-valye)组合:set每个元素只包含关键字.. 每个根据关键字 ...

  2. Hadoop 管理工具HUE配置-hdfs_clusters配置

    在HUE的hdfs_clusters中目前主要是配置hdfs相关的,配置好了之后便可以在hue中愉快的管理数据了,不过目前的配置还是比较...简单的..    里面的配置主要是参考了hue官方文档,还 ...

  3. 使用R语言-为矩阵（表格）的行列命名

    转自:http://www.dataguru.cn/article-2217-1.html R语言中经常进行矩阵(表格)数据的处理,在纷繁复杂的数据中,为其行列定义一个名字变得尤为重要.在处理巨量数据 ...

  4. 外观(Facade)模式

    外观模式:为子系统中的一组接口提供一个一致的界面.此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用 在软件开发中,有时候为了完成一项较为复杂的功能,一个客户类需要和多个业务类交互,而这些需 ...

  5. Android 使用自定义字体

    整个项目要使用第三方字体首先将字体文件放到assets文件夹下 因为整个项目要用第三方字体这里我重写了 TextView Button EditText 三个控件 以TextView 为例代码如下   ...

  6. python实现简单的登陆认证（含简单的文件操作）

    需求: 让用户输入用户名密码 认证成功后显示欢迎信息 输错三次后退出程序 可以支持多个用户登录 (提示,通过列表存多个账户信息) 用户3次认证失败后,退出程序,再次启动程序尝试登录时,还是锁定状态(本 ...

  7. [UE4]InterpToMovement

    InterpToMovement:可以让Actor在规定时间内,在多个点之间循环移动. Duration:规定时间

  8. 小程序API录音 微信录音后 Silk格式转码MP3

    http://www.cnblogs.com/wqh17/p/6911748.html

  9. VMware安装CentOS7踩坑

      1.VMware安装Centos7加载界面不显示,但有快照 单击“开始”,运行中输入cmd. 然后输入命令 netsh winsock reset. 重启计算机. 2.nat模式网络问题     ...

  10. MySql 引擎

    存储引擎: 存储引擎就是指表的类型以及表在计算机上的存储方式 它处于MySQL体系架构中Server端底层,是底层物理结构的实现,用于将数据以各种不同的技术方式存储到文件或者内存中,不同的存储引擎具备 ...