标签：60 Canvas 效果 示例 ctx 画布 设置 var 时钟
用canvas画布实现时钟效果
相信很多学习前端的新人,学完html结构和css样式以后,都会开始学习JavaScript,在学一段JavaScript以后会接触到canvas画布部分,相信很多同学学习完以后没有很好的项目给自己能够练习,所有我在这里把代码和项目送给有需要的同学！！
前言
各位五湖四海的同学既然选择了前端开发这个行业,就努力的学下去吧,在这个行业技术不断的提高,才有可能获得你想要的报酬,废话就不多说啦,下面请用心的去理解
一、Canvas HTML的结构部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas时钟</title>
<style>
canvas{
background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
<script src="js/index.js"></script>
</body>
</html>
二、JS部分
1.先获取属性和变量
代码如下（示例）：
var canvasDom = document.getElementById('cvs'); //获取canvas 画布 通过ID获取
var ctx = canvasDom.getContext('2d'); //获取上下文 getContext('2d') 设置绘画的环境
var width = canvasDom.width; //设置绘画的宽度
var height = canvasDom.height; //设置绘画的高度
var radius = 150; //设置圆的半径
2.平移坐标系
这个平移Canvas画布的坐标系是为了方便作画,因为Canvas的画布的起始点在(0,0)
位置
代码如下（示例）：
ctx.translate(width / 2, height / 2); //translate 平移图形
3.角度计算弧度
代码如下（示例）：
function getRadian(angle) {
return angle * Math.PI / 180;
}
4.创建函数画圆
你要创建一个时钟的话,首先的话要利用canvas的属性画一个圆盘,先利用save()属性
保存一个绘画状态,再利用beginPath()属性开辟一个新的绘画路径,接着用arc()创建圆
代码如下（示例）：
function drawCircle() {
//保存现场
ctx.save(); //保存当前的绘画状态
ctx.beginPath(); //开启一个新的路径
ctx.arc(0, 0, radius, 0, getRadian(360)); // 用于创建圆和部分圆
ctx.strokeStyle = '#ccc'; // 颜色
ctx.lineWidth = 5; //线条的宽度
ctx.stroke(); //描边画圆
ctx.restore(); //恢复现场
}
5.画时钟的刻度
画时钟刻度这一步是比较复杂的,也是很多同学都不明白的,Canvas每次作画的时候,会先进行先保存现场save()有保存现场的功能,通过lineWidth统一设置线条宽度,通过strokeStyle设置统一的颜色,通过for循环来循环出60次的刻度
代码如下（示例）：
function drawMarks() {
ctx.save(); //保存现场
ctx.lineWidth = 6; //统一设置线条宽度
ctx.strokeStyle = '#aaa'; //统一设置线条颜色
for (var i = 0; i < 60; i++) {
ctx.save();
//旋转画布
ctx.rotate(getRadian(6 * i)); //旋转
ctx.moveTo(0, -radius + 10);
if (i % 5 === 0) {
ctx.lineTo(0, -radius + 30);
} else {
ctx.lineTo(0, -radius + 20);
}
ctx.lineCap = "round" //末端设置为圆形
ctx.stroke();
ctx.restore(); //恢复现场
}
ctx.restore();
}
6.设置时针的属性
代码如下（示例）：
function drawLine(lineWidth, color, length, angle) {
ctx.save();
ctx.beginPath(); //开启一个新的路径
ctx.strokeStyle = color; //设置颜色
ctx.lineWidth = lineWidth;
ctx.lineCap = "round" //设置末端
ctx.rotate(getRadian(angle));
ctx.moveTo(0, 0.1 * length);
ctx.lineTo(0, -0.9 * length);
ctx.stroke();
ctx.restore();
}
7.生成当前时间
要在时钟当中获取到当前时间的话,要先获取当前时间,再获取凌晨的时间
代码如下（示例）：
function drawKLines() {
var now = new Date(); ///当前时间
//今天凌晨的时间
var zero = new Date(now.getFullYear(), now.getMonth(), now.getDate());
//今天流程到现在,经过的毫秒数
var milis = now.getTime() - zero.getTime();
//今天流程到现在,经过的毫秒数
var seconds = Math.floor(milis / 1000);
//画时钟
//经过的小时数
var hAngle = seconds / 60 / 60 / 12 * 360;
drawLine(6, 'red', 70, hAngle);
var mAngle = seconds / 60 / 60 * 360;
drawLine(5, "blue", 90, mAngle);
var sAngle = seconds / 60 * 360;
drawLine(3, 'yellow', 100, sAngle);
}
drawKLines();
8.运行函数
在上面我们创建和生成的函数都没有去运行,到最后一步我们要创建一个函数,去运行上面的函数,运行函数我们需要清除画布一次,然后再从新开始作画
function draw() {
//清空画布
ctx.clearRect(-width / 2, -height / 2, width, height);
//重新画
drawCircle();
drawMarks();
drawKLines();
}
draw();
setInterval(draw, 1000); //这里创建一个定时器的原因,是让这个函数每一秒去运行
总结
我是本次的主编,邦少,第一次写文章,也不知道写什么,往各位同学不要见怪,我会继续努力的,也祝各位也在学习前端的道路上更上一层楼,要想拿源码的同学,私聊评论.前端的学习没有什么捷径,只有不断的去练习去提升,才能让自己在未来的工作上换得更加高的报酬。希望大家能坚持下去,一起加油
标签：60,Canvas,效果,示例,ctx,画布,设置,var,时钟 来源： https://blog.csdn.net/qq_25972233/article/details/112055513
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。