基于canvas的电子始终
//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的电子始终的更多相关文章
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 基于canvas的二维码邀请函生成插件
去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...
- 7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
- 基于jquery结婚电子请柬特效素材
分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 微信小程序-基于canvas画画涂鸦
代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 基于canvas的仪表盘效果
概述 基于Canvas实现的仪表盘及效果.通过配置参数,可以任意修改仪表盘颜色,刻度,动画过渡时间等,满足不同场景下的使用.同时使用原生的Canvas,也是学习Canvas的很好的例子. 详细 代码下 ...
- 基于canvas实现钟表
原理说明 1.通过arc方法实现钟表外环: 2.通过line实现钟表时针,分针,秒针和刻度标志的绘制,基于save和restore方法旋转画布绘制不同角度的指针: 3.通过font方法实现在画布上绘制 ...
- 基于canvas二次贝塞尔曲线绘制鲜花
canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...
- 基于canvas实现的高性能、跨平台的股票图表库--clchart
什么是 ClChart? ClChart是一个基于canvas创建的简单.高性能和跨平台的股票数据可视化开源项目.支持PC.webApp以及React Native和Weex等平台.在React Na ...
随机推荐
- 自动控制中常用的Matlab命令
部分分式展开:[r p k]=residue[num,den] 传递函数到状态空间:[A, B, C, D]=tf2ss(num, den) % 状态空间不唯一,Matlab给出其中一种 状态空间到 ...
- 胖子哥的大数据之路(9)-数据仓库金融行业数据逻辑模型FS-LDM
引言: 大数据不是海市蜃楼,万丈高楼平地起只是意淫,大数据发展还要从点滴做起,基于大数据构建国家级.行业级数据中心的项目会越来越多,大数据只是技术,而非解决方案,同样面临数据组织模式,数据逻辑模式的问 ...
- 在Python中进行自动化单元测试的教程
From: https://www.jb51.net/article/64119.htm 一.软件测试 大型软件系统的开发是一个很复杂的过程,其中因为人的因素而所产生的错误非常多,因此软件在开发过程必 ...
- 【事务隔离级别】数据库事务隔离级别-UNDERSTANDING ISOLATION LEVELS
参考链接:ISOLATION LEVELS ISOLATION LEVELS In a database system, concurrent transactions are processed i ...
- Android开发之选项菜单(optinosMenu)
android一共有三种形式的菜单: 1.选项菜单(optinosMenu) 2.上下文菜单(ContextMenu) ...
- DB2日志清理
1.在windows系统中,DB2 日志db2diag.log 在什么地方? 以下是IBM网站上的解答 Question Where is db2diag.log for DB2 V9.5 locat ...
- tomcat操作
一.启动 D:\tomcat8.5.9\bin\startup 或者 D:\tomcat8.5.9\bin\catalina start 关闭tomcat: D:\tomcat8.5.9\bin ...
- 学习笔记之Intermediate Python for Data Science | DataCamp
Intermediate Python for Data Science | DataCamp https://www.datacamp.com/courses/intermediate-python ...
- WireGuard协议介绍
原文: https://www.jianshu.com/p/32c3e62c2711
- [UE4]Cast to 转换成纯函数
这样就变成不需要执行线了,可以直接得到转换结果