canvas的认识，时钟的设置

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

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

绘制一个圆

线性渐变颜色

径向渐变

图片的绘制：

视频播放：

视频的自动播放

绘制视频：

时钟的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas1" width="800" height="600"></canvas>

<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的认识，时钟的设置的更多相关文章

canvas自适应圆形时钟绘制
前面的话前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制效果演示最终自适应圆形时钟的效果如下所示功能分析下面来分析一下该圆形时钟的功能 [1]静态背景对于 ...
canvas做的时钟，学习下
canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...
深夜，用canvas画一个时钟
深夜,用canvas画一个时钟查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
canvas的width和height设置问题
最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题代码如下: <!DOCTYPE html> <html lang="en&q ...
canvas炫酷时钟
canvas炫酷时钟实现的功能主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...
H5_0009：关于HTML5中Canvas的宽、高设置问题
关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一: <canvas widt ...
NTP网络授时服务器部署及网络时钟同步设置说明
NTP网络授时服务器部署及网络时钟同步设置说明 NTP网络授时服务器部署及网络时钟同步设置说明本文由安徽京准科技提供@请勿转载. 一.前言 1.NTP简介 NTP是网络时间协议(Network T ...
使用canvas绘制一个时钟
周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...
html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

微信小程序web-view使用测试总结
1.后台配置业务域名. 2.在开发者工具的web-view组件中绑定业务域名. 3.点击开发者工具的详情按钮,选择调试基础库高版本,如果不设置,有可能绑定的业务域名内容不显示. 4.如果是公众号上的内 ...
Python Django 之静态文件存放设置
一.静态文件存放路径设置STATICFILES_DIRS 1.在django项目目录下面新建静态文件保存目录 2.在setting中添加相应寻找静态文件目录的配置 STATICFILES_DIRS=( ...
RabbitMQ 队列、消息持久化
RabbitMQ的消息队列的持久化是一个很不错的功能,设置也非常简单.如下代码: 1.设置队列持久化(在声明队列的时候设置) channel.QueueDeclare(queue: "q.l ...
js call回调的this指向问题
function fn1(){ console.log(1); } function fn2(){ console.log(2); } fn1.call(fn2); //输出 1 fn1.call.c ...
IEnumerable<T> list注意事项
方法返回的时候要设置用list会比较稳妥. 遇到的问题: private IDbConnection GetConnection(){var dataSettingsManager = new Da ...
单元测试模拟-moq
1.moq 支持 net core 2.moq 通过一个接口类型可以产生一个新的类 3.举例 //define interface to be mocked public interface ITe ...
AbstractBootstrap.bind()
------------------headContext也就是pipeline最开头的那个handlercontext中的bind方法@Override public void bind( Chan ...
Python 的基本运算及分析
1题输出1 2 3 4 5 6 8 9 10 . 方法一: count = 0while count < 10 : count += 1 if count == 7 : continue ...
Python 数据共享
import time from multiprocessing import Process,Manager,Lock # a = 10 # # tmp = a # # tmp -= 1 # # a ...
Shiro自定义Realm时用注解的方式注入父类的credentialsMatcher
用Shiro做登录权限控制时,密码加密是自定义的. 数据库的密码通过散列获取,如下,算法为:md5,盐为一个随机数字,散列迭代次数为3次,最终将salt与散列后的密码保存到数据库内,第二次登录时将登录 ...

canvas的认识，时钟的设置

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

随机推荐

热门专题