canvas的认识，时钟的设置

时间：2022-09-09 13:03:43

canvas的三要素：ID标识，width宽度，height高度，他是行元素

IE9才支持canvas，canvas是一个透明的画板，要用js去画

canvas的认识，时钟的设置

canvas的认识，时钟的设置

绘制一个圆

canvas的认识，时钟的设置

线性渐变颜色

canvas的认识，时钟的设置

径向渐变

图片的绘制：

canvas的认识，时钟的设置

视频播放：

canvas的认识，时钟的设置

视频的自动播放

canvas的认识，时钟的设置

绘制视频：

canvas的认识，时钟的设置

canvas的认识，时钟的设置

时钟的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas1" width="800" height="600"></canvas>
<!--1,表盘
2、刻度
3、指针
4、获取时间
5、重新绘制：每个1秒钟绘制一次
-->
<script type="text/javascript">
var canvas1=document.querySelector('#canvas1')
var ctx=canvas1.getContext('2d')

function drawTime(){
//表盘
ctx.clearRect(0,0,800,600)//清盘
ctx.beginPath()
ctx.arc(400,300,200,0,2*Math.PI)
ctx.lineWidth=10
ctx.strokeStyle='gray'
ctx.stroke()
ctx.closePath()
ctx.save()//保留这个坐标系的位置，以及保留ctx的属性样式
//刻度
ctx.translate(400,300)//移动坐标系
ctx.save()//保留了移动后的坐标原点为400,300像素位置的坐标系
//分针的刻度
for(var i=0;i<60;i++){
ctx.beginPath()
//有60个刻度，每一次旋转360（2*math.pi）/60
ctx.rotate(2*Math.PI/60)
ctx.moveTo(170,0)
ctx.lineTo(190,0)
ctx.lineWidth=5
ctx.strokeStyle='#aaa'
ctx.stroke()
ctx.closePath()
}
ctx.restore()//恢复到上一个save（），没有旋转前，原点在400,300位置的坐标系上
ctx.save()
//时钟的刻度
for(var i=0;i<12;i++){
ctx.beginPath()
//有60个刻度，每一次旋转360（2*math.pi）/60
ctx.rotate(2*Math.PI/12)
ctx.moveTo(165,0)
ctx.lineTo(190,0)
ctx.lineWidth=5
ctx.strokeStyle='#333'
ctx.stroke()
ctx.closePath()
}
ctx.restore(
ctx.save()
)

//获取时间
var nowTime=new Date()
console.log(nowTime)
//获取小时
var hour=nowTime.getHours()
//获取分
var min=nowTime.getMinutes()
//获取秒
var sec=nowTime.getSeconds()

if(hour>=12){
hour=hour-12
}
console.log(hour,min,sec)

ctx.rotate(-2*Math.PI/4)//将整个坐标系逆时针旋转90度
ctx.save()
//首先绘制秒针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*sec)
ctx.moveTo(-20,0)
ctx.lineTo(150,0)
ctx.lineWidth=3
ctx.strokeStyle='red'
ctx.stroke()
ctx.closePath()

ctx.restore()

//绘制分针
ctx.beginPath()
ctx.rotate(2*Math.PI/60*min + 2*Math.PI/60*sec/60)
ctx.moveTo(-15,0)
ctx.lineTo(140,0)
ctx.lineWidth=5
ctx.strokeStyle='darkslategray'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()

//绘制时针
ctx.beginPath()
ctx.rotate(2*Math.PI/12*hour + 2*Math.PI/12*min/60+2*Math.PI/12/60*sec/60)
ctx.moveTo(-10,0)
ctx.lineTo(100,0)
ctx.lineWidth=10
ctx.strokeStyle='darkslategray'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.restore()
requestAnimationFrame(drawTime)//画完了以后才会调用这个函数
}

//这是画动画的第一个方式
// setInterval(function(){
// drawTime()
// },1000)

//尽最大能力去渲染，保证不卡帧，请求动画帧的方法
requestAnimationFrame(drawTime)//请求动画帧
</script>
</body>
</html>

canvas的认识，时钟的设置的更多相关文章

  1. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  2. canvas做的时钟，学习下

    canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(&quot ...

  3. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  4. canvas的width和height设置问题

    最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题 代码如下: <!DOCTYPE html> <html lang="en&q ...

  5. canvas炫酷时钟

    canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...

  6. H5&lowbar;0009：关于HTML5中Canvas的宽、高设置问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas widt ...

  7. NTP网络授时服务器部署及网络时钟同步设置说明

    NTP网络授时服务器部署及网络时钟同步设置说明 NTP网络授时服务器部署及网络时钟同步设置说明  本文由安徽京准科技提供@请勿转载. 一.前言 1.NTP简介 NTP是网络时间协议(Network T ...

  8. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  9. html5、canvas绘制本地时钟

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Discuz&excl; X3搬家后UCenter出现UCenter info&colon; MySQL Query Error解决方案

    Discuz! X3 X2.5论坛搬家后 登录UCenter出现报错:UCenter info: MySQL Query ErrorSQL:SELECT value FROM [Table]vars ...

  2. html、url、http、servlet&amp&semi;jsp之间千丝万缕的联系

    html.url.http.servlet和jsp这五者一直是五位一体的关系,他们结合在一起就是对面向过程最好的解释. 客户端通过http超文本传输协议传输请求,服务器通过地址栏的url判断应该交给哪 ...

  3. Python导入cx&lowbar;Oracle报错

    系统环境:RHEL5.4   python2.5(手动编译安装,系统带有2.4版本) 在使用python脚本访问数据库时,需要导入cx_Oracle模块 $>>>import cx_ ...

  4. 深入JVM-锁与并发

    一.锁在Java虚拟机中的实现与优化 1.1 偏向锁 偏向锁是JDK 1.6 提出的一种锁优化方式.其核心思想是,如果程序没有竞争,则取消之前已经取得锁的线程同步操作.也就说,若某一锁被线程获取后,便 ...

  5. &lbrack;PHP&rsqb;MemCached高级缓存

    Memcache Win32 的安装下载:Memcache Win32 [www.php100.com]   [www.jehiah.cz/projects/memcached-win32/] 1.解 ...

  6. jQuery各种效果举例

    jQuery 所有jQuery详细使用说明请见:http://www.php100.com/manual/jquery/ jQuery的作用是操作浏览器html,从而达到用户的可视化效果,按照功能可分 ...

  7. 2015网易校招Java开发工程师&lpar;技术架构&rpar;在线笔试题

    1.  程序和进程的本质区别是? A.在外存和内存存储 B.非顺序和顺序执行机器指令 C.独占使用和分时使用计算机资源 D.静态和动态特征 参考答案分析: 进程与应用程序的区别: 进程(Process ...

  8. Access2007中如何运行SQL执行SQl语句

    1. 在“创建”选项卡中,单击“其他”组中的“查询设计”. 2. 单击“显示表”对话框中的“关闭”,而不添加任何表或查询. 3. 在“设计”选项卡中,单击“查询类型”工作组中的“联合”. 4. 单击“ ...

  9. Singleton&lpar;单例&rpar;模式

    Singleton(单例)模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. public class Singleton { private static Singleton ourIns ...

  10. python——绘制二元高斯分布的三维图像，

    在对数据进行可视化的过程中,可能经常需要对数据进行三维绘图,在python中进行三维绘图其实是比较简单的,下面我们将给出一个二元高斯分布的三维图像案例,并且给出相关函数的参数. 通常,我们绘制三维图像 ...

相关文章