使用canvas实现闹钟

Canvas标签
初始化canvas标签
要使用canvas实现闹钟功能只需要使用
首先创建canvas标签设置初始化数值width='400',height='400'
使用js获取到canvas标签
选择2d打印，获得时间算出时间对应的度数
因为canvas使用的弧线是从90°开始的，所以要实现闹钟0度为起始点，需要减去90°，以此类推
而后将秒针刻度，分针刻度，时刻刻度都打印出来
再将秒针，分针，时针依次打印出来
将代码放入drwp（）方法里，使用定时器每秒调用一次
最后实现的效果图

Canvas标签

初始化canvas标签

<canvas id="tutorial" width="150" height="150"></canvas>

fillStyle
设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle
设置或返回用于笔触的颜色、渐变或模式
shadowColor
设置或返回用于阴影的颜色
shadowBlur
设置或返回用于阴影的模糊级别
shadowOffsetX
设置或返回阴影距形状的水平距离
shadowOffsetY
设置或返回阴影距形状的垂直距离

createLinearGradient()
创建线性渐变（用在画布内容上）
createPattern()
在指定的方向上重复指定的元素
createRadialGradient()
创建放射状/环形的渐变（用在画布内容上）
addColorStop()
规定渐变对象中的颜色和停止位置

lineCap
设置或返回线条的结束端点样式
lineJoin
设置或返回两条线相交时，所创建的拐角类型
lineWidth
设置或返回当前的线条宽度
miterLimit
设置或返回最大斜接长度

rect()
创建矩形
fillRect()
绘制“被填充”的矩形
strokeRect()
绘制矩形（无填充）
clearRect()
在给定的矩形内清除指定的像素

fill()
填充当前绘图（路径）
stroke()
绘制已定义的路径
beginPath()
起始一条路径，或重置当前路径
moveTo()
把路径移动到画布中的指定点，不创建线条
closePath()
创建从当前点回到起始点的路径
lineTo()
添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()
从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()
创建二次贝塞尔曲线
bezierCurveTo()
创建三次方贝塞尔曲线
arc()
创建弧/曲线（用于创建圆形或部分圆）
arcTo()
创建两切线之间的弧/曲线
isPointInPath()
如果指定的点位于当前路径中，则返回 true，否则返回 false

要使用canvas实现闹钟功能只需要使用

beginPath()
moveTo()
closePath();
stroke()
fillStyle
arc()
fill()

首先创建canvas标签设置初始化数值width=‘400’,height=‘400’

<canvas id="canvas" width="400" height="400"></canvas>

使用js获取到canvas标签

var canvas = document.getElementById("canvas"); //获取canvas标签

选择2d打印，获得时间算出时间对应的度数

var context = canvas.getContext("2d"); //选择2d显示打印
var canvas = document.getElementById("canvas"); //获取canvas标签var context = canvas.getContext("2d"); //选择2d显示打印var nowdate = new Date();var hour = nowdate.getHours(); //获取小时var minute = nowdate.getMinutes(); //获得分var second = nowdate.getSeconds(); //获得秒var h = (hour * 30 - 90) * Math.PI / 180;var m = (minute * 6 - 90) * Math.PI / 180;var s = (second * 6 - 90) * Math.PI / 180;

因为canvas使用的弧线是从90°开始的，所以要实现闹钟0度为起始点，需要减去90°，以此类推

var hour = nowdate.getHours(); //获取小时
var h = (hour * 30 - 90) * Math.PI / 180;
因为var h = (hour * 30 - 90)得到的是数值类型
需要Math.PI/180转换为度

而后将秒针刻度，分针刻度，时刻刻度都打印出来

context.beginPath(); //开始绘制//打印分针与秒针刻度for(var i = 0; i < 60; i++) {context.moveTo(200, 200) //起始点context.arc(200, 200, 150, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180); //设置起始位，半径，读书}context.closePath();context.stroke();//将秒针，分针过长的线覆盖context.beginPath(); //开始绘制context.moveTo(200, 200);context.fillStyle = "#fff";context.arc(200, 200, 150 * 19 / 20, 0, 360 * Math.PI / 180);context.fill();context.beginPath(); //开始绘制//打印时针刻度for(var i = 0; i < 12; i++) {context.moveTo(200, 200) //起始点context.arc(200, 200, 150, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180); //设置起始位，半径，度数}context.closePath();context.stroke();//将时针刻度过长的线覆盖context.beginPath(); //开始绘制context.moveTo(200, 200);context.fillStyle = "#fff";context.arc(200, 200, 150 * 18 / 20, 0, 360 * Math.PI / 180);context.fill();

再将秒针，分针，时针依次打印出来

//秒针context.beginPath();context.moveTo(200, 200);context.arc(200, 200, 150 * 16 / 20, s, s);context.stroke();//分针context.beginPath();context.moveTo(200, 200);context.arc(200, 200, 150 * 14 / 20, m, m);context.stroke();//时针context.beginPath();context.moveTo(200, 200);context.arc(200, 200, 150 * 12 / 20, h, h);context.stroke();

将代码放入drwp（）方法里，使用定时器每秒调用一次

drwp();setInterval("drwp()", 1000)

最后实现的效果图

canvas实现会动的闹钟相关推荐

html5canvas下绘制gif,JS+canvas操作gif动图
这次给大家带来JS+canvas操作gif动图,JS+canvas操作gif动图的注意事项有哪些,下面就是实战案例,一起来看一下. HTML5 canvas可以读取图片信息,绘制当前图片.于是可以实现 ...
在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
关于canvas插入gif动图的替代方案
前言:目前canvas是不支持插入gif动图的,但是有些业务要求开发人员可以将gif动图插入到canvas中并进行一系列的操作(移动,缩放,旋转),本人也在网上找了一圈,也没有什么有效的方式,基本都是 ...
HTML5的绝活:巧用Canvas制作会动的时钟
这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害. HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的 ...
canvas 实现会动眼睛的企鹅
参考代码:http://www.108js.com/article/article7/70037.html?id=193 整理了下代码,多加了点注释... 其中用到了三次贝塞尔曲线 (暂时不太理 ...
shader TileMap html的Canvas绘图缓动/反弹动作 unity
图解Charles抓包工具使用教程就是抓取返回的Data- -------------------------------------------------------shader 1 shade ...
canvas——绘制图片——动图制作
图片: drawImage():将原图片像素的内容复制到画布上: 第一个参数是源图片,可以是img元素或Image构造函数创建的屏幕外图片对象: 三个参数时: 指定图片绘制的x.y坐标: 五个参数时: ...
canvas 基础和动图案例
<canvas> 是 HTML5 新增的一种标签,一个可以使用脚本(通常为JavaScript)在其中绘制图的 HTML 元素.它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚 ...
使用canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...

canvas实现会动的闹钟

使用canvas实现闹钟

Canvas标签

初始化canvas标签

要使用canvas实现闹钟功能只需要使用

首先创建canvas标签设置初始化数值width=‘400’,height=‘400’

使用js获取到canvas标签

选择2d打印，获得时间算出时间对应的度数

因为canvas使用的弧线是从90°开始的，所以要实现闹钟0度为起始点，需要减去90°，以此类推

而后将秒针刻度，分针刻度，时刻刻度都打印出来

再将秒针，分针，时针依次打印出来

将代码放入drwp（）方法里，使用定时器每秒调用一次

最后实现的效果图

canvas实现会动的闹钟相关推荐

最新文章

热门文章