html5|canvas绘制圆形与12边形（多边形）时钟
canvas绘制圆形与12边形（多边形）时钟
- 先看圆形时钟
-
- 大致3个步骤
-
- 1.获取画布及内容，定义初始变量
- 2.封装3个方法
- 3.画时钟，及封装
- 12边形时钟
-
-
- 相对于圆形时钟，12边形刚好对应于时钟的12个刻度，即我们仅需要改变一下外边框（时钟盘）和刻度微调即可
-
先看圆形时钟 大致3个步骤 1.获取画布及内容，定义初始变量
//1
var canvas = document.querySelector('#cont');
//21,2步一般固定，除了1的画布id获取，2固定
var ctx = canvas.getContext('2d');
//3 定义基础变量
var w = h = 400;
//时钟宽高
var x = y = 200;
//时钟中心坐标
var r = 180;
//时钟半径
var r_hour = 60;
//时针长度
var r_minute = 120;
//分针长度
var r_secound = 140;
//秒针长度
var r_text = 140;
//定义表盘文字半径
var r_square = 165;
//刻度
var r_circle = 10;
//表盘小圆点
var deg = 2 * Math.PI;
//定义基本的四角
2.封装3个方法
/*** 写文字 */
function drawText(text, x, y) {ctx.font = 'bold 26px 楷体';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, x, y);
}/*** 画直线*/
function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2)
//颜色
ctx.strokeStyle = color;
//线宽,不用单位
ctx.lineWidth = width;
ctx.lineCap = 'round';
//变圆
ctx.stroke();
ctx.closePath();
}/*** 画圆 */
function drawCircle(x, y, r, color) {ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2,)
ctx.fillStyle = color || '#000';
ctx.fill();
ctx.closePath();
}
3.画时钟，及封装
此时是我们的正式开始，又分为5步
最开始，我们要注意中心点移动
//平移中心点,x=y=0
ctx.translate(w / 2, h / 2);
第二步，开始时，我们是定死了三根针位置，没有获取到当前时间，获取时间时注意三根针的半径对应，否则可能出现针长度会变化。
//step1：画圆盘
drawCircle(0, 0, r, '#fff');
//step2.画时钟的表针//获取当前时间
var date = new Date();
//* (deg / 12) - deg / 4
var hour = date.getHours() * (deg / 12) - deg / 4;
//[0,23]
var miunte = date.getMinutes() * (deg / 60) - deg / 4;
//[0-59]
var second = date.getSeconds() * (deg / 60) - deg / 4;
//[0-59]drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10)
drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5)
drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)//step3，画表钉
drawCircle(0, 0, 10, '#000');
//step4，画数字
for (let i = 1;
i <= 12;
i++) {/***
* 计算圆周坐标
* x= x+r*cos(#)
* y = y+r*cos(#)
*/
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x = r_text * Math.cos(θ);
var y = r_text * Math.sin(θ);
drawText(i, x, y);
}//step5，画刻度
for (let i = 0;
i < 60;
i++) {/***
* x1,y1x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判断是否为整点*/
if (i % 5 == 0) {var x2 = r_square * Math.cos(θ);
var y2 = r_square * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}}
封装：将画圆的5步全部封装到一个方法function clock(){…}中
计时器调用，每一秒执行一次(需先初始化)
//初始化执行一次
//clock();
setInterval(function () {clock();
}, 1000)现在就做完了，下面是完整画圆代码：
基本时钟 - 锐客网
>
canvas {margin: 0 auto;
border: 2px solid #aaa;
display: block;
}.clock {width: 400px;
height: 400px;
margin: 100px auto;
background: #ddd;
border-radius: 20px;
}
>/** @type {HTMLCanvasElement} */
//1
var canvas = document.querySelector('#cont');
//21,2步一般固定，除了1的画布id获取，2固定
var ctx = canvas.getContext('2d');
//3 定义基础变量
var w = h = 400;
//时钟宽高
var x = y = 200;
//时钟中心坐标
var r = 180;
//时钟半径
var r_hour = 60;
//时针长度
var r_minute = 120;
//分针长度
var r_secound = 140;
//秒针长度
var r_text = 140;
//定义表盘文字半径
var r_square = 165;
//刻度
var r_circle = 10;
//表盘小圆点
var deg = 2 * Math.PI;
//定义基本的四角//平移中心点,x=y=0
ctx.translate(w / 2, h / 2);
function clock() {//step1：画圆盘
drawCircle(0, 0, r, '#fff');
//step2.画时钟的表针//获取当前时间
var date = new Date();
//* (deg / 12) - deg / 4
var hour = date.getHours() * (deg / 12) - deg / 4;
//[0,23]
var miunte = date.getMinutes() * (deg / 60) - deg / 4;
//[0-59]
var second = date.getSeconds() * (deg / 60) - deg / 4;
//[0-59]drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10)
drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5)
drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)//step3，画表钉
drawCircle(0, 0, 10, '#000');
//step4，画数字
for (let i = 1;
i <= 12;
i++) {/***
* 计算圆周坐标
* x= x+r*cos(#)
* y = y+r*cos(#)
*/
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x = r_text * Math.cos(θ);
var y = r_text * Math.sin(θ);
drawText(i, x, y);
}//step5，画刻度
for (let i = 0;
i < 60;
i++) {/***
* x1,y1x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判断是否为整点*/
if (i % 5 == 0) {var x2 = r_square * Math.cos(θ);
var y2 = r_square * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}}
}//初始化执行一次
//clock();
setInterval(function () {clock();
}, 1000)/*** 写文字 */
function drawText(text, x, y) {ctx.font = 'bold 26px 楷体';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, x, y);
}/*** 画直线*/
function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2)
//颜色
ctx.strokeStyle = color;
//线宽,不用单位
ctx.lineWidth = width;
ctx.lineCap = 'round';
//变圆
ctx.stroke();
ctx.closePath();
}/*** 画圆 */
function drawCircle(x, y, r, color) {ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2,)
ctx.fillStyle = color || '#000';
ctx.fill();
ctx.closePath();
}
效果图如下
文章图片
12边形时钟 相对于圆形时钟，12边形刚好对应于时钟的12个刻度，即我们仅需要改变一下外边框（时钟盘）和刻度微调即可
外边框
//step1.画12边形时钟盘
for (let i = 0;
i < 12;
i++) {var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x1 = (r + 10) * Math.cos(θ);
var y1 = (r + 10) * Math.sin(θ);
var x2 = (r + 10) * Math.cos(θ + (Math.PI * 2 / 12));
var y2 = (r + 10) * Math.sin(θ + (Math.PI * 2 / 12));
drawLine(x1, y1, x2, y2, '#bbb', 2);
}
刻度变化
for (let i = 0;
i < 60;
i++) {/***
* x1,y1x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判断是否为整点*/
if (i % 5 == 0) {var x1 = (r + 5) * Math.cos(θ);
var y1 = (r + 5) * Math.sin(θ);
var x2 = (r_square) * Math.cos(θ);
var y2 = (r_square) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}}
下面是此部分完整代码
十二边形时钟 - 锐客网
>
canvas {margin: 0 auto;
display: block;
border: solid;
}.clock {width: 400px;
height: 400px;
margin: 100px auto;
border-radius: 20px;
}
>/** @type {HTMLCanvasElement} */
//1
var canvas = document.querySelector('#cont');
//21,2步一般固定，除了1的画布id获取，2固定
var ctx = canvas.getContext('2d');
//3 定义基础变量
var w = h = 400;
//时钟宽高
var x = y = 200;
//时钟中心坐标
var r = 180;
//时钟半径
var r_hour = 60;
//时针长度
var r_minute = 120;
//分针长度
var r_secound = 140;
//秒针长度
var r_text = 140;
//定义表盘文字半径
var r_square = 165;
//刻度
var r_circle = 10;
//表盘小圆点
var deg = 2 * Math.PI;
//定义基本的四角//平移中心点,x=y=0ctx.translate(w / 2, h / 2);
//step1.画12边形时钟盘
for (let i = 0;
i < 12;
i++) {var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x1 = (r + 10) * Math.cos(θ);
var y1 = (r + 10) * Math.sin(θ);
var x2 = (r + 10) * Math.cos(θ + (Math.PI * 2 / 12));
var y2 = (r + 10) * Math.sin(θ + (Math.PI * 2 / 12));
drawLine(x1, y1, x2, y2, '#bbb', 2);
}function clock() {//step1：画圆盘
drawCircle(0, 0, r, '#fff');
//step2.画时钟的表针//获取当前时间
var date = new Date();
//* (deg / 12) - deg / 4
var hour = date.getHours() * (deg / 12) - deg / 4;
//[0,23]
var miunte = date.getMinutes() * (deg / 60) - deg / 4;
//[0-59]
var second = date.getSeconds() * (deg / 60) - deg / 4;
//[0-59]drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10)
drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5)
drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)//step3，画表钉
drawCircle(0, 0, 10, '#000');
//step4，画数字
for (let i = 1;
i <= 12;
i++) {/***
* 计算圆周坐标
* x= x+r*cos(#)
* y = y+r*cos(#)
*/
var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2;
var x = r_text * Math.cos(θ);
var y = r_text * Math.sin(θ);
drawText(i, x, y);
}//step5，画刻度
for (let i = 0;
i < 60;
i++) {/***
* x1,y1x2,y2
*/
var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2;
var x1 = r * Math.cos(θ);
var y1 = r * Math.sin(θ);
/*判断是否为整点*/
if (i % 5 == 0) {var x1 = (r + 5) * Math.cos(θ);
var y1 = (r + 5) * Math.sin(θ);
var x2 = (r_square) * Math.cos(θ);
var y2 = (r_square) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#f00', 3);
} else {var x2 = (r_square + 4) * Math.cos(θ);
var y2 = (r_square + 4) * Math.sin(θ);
drawLine(x1, y1, x2, y2, '#bbb', 2);
}}
}//初始化执行一次
clock();
setInterval(function () {clock();
drawText('时钟', 0, 100);
}, 1000)/*** 写文字 */
function drawText(text, x, y) {ctx.font = 'bold 26px 楷体';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, x, y);
}/*** 画直线*/
function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2)
//颜色
ctx.strokeStyle = color;
//线宽,不用单位
ctx.lineWidth = width;
ctx.lineCap = 'round';
//变圆
ctx.stroke();
ctx.closePath();
}/*** 画圆 */
function drawCircle(x, y, r, color) {ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2,)
ctx.fillStyle = color || '#000';
ctx.fill();
ctx.closePath();
}
【html5|canvas绘制圆形与12边形（多边形）时钟】效果图如下
文章图片
感谢你能看到这里，下面我简单说一下有些方法和注意点，
1.画图，最重要的就是坐标，我们先将中心点平移，使得原本左上方（0,0）变到了圆（时钟）中心点的坐标，然后对于算圆周边的坐标较为容易；
2.算坐标，见下图，x = x0+rcos(θ),y=y0+rsin(θ);
文章图片
对于刻度，可以视为同心圆，即处于数字和圆边缘之内
3.对于cos,sin注意使用弧度制
推荐阅读
- canvas（一）基本用法
- Python绘制小红花
- vue|vue canvas 手绘进度条动画
- canvas不过如此（一）
- HTML5新增选择器属性方法
- HTML|HTML canvas中translate()与rotate()的理解
- HTML5学习之ul|HTML5学习之ul li列表实战
- html5|各行业工资单出炉 IT类连续多年霸占“榜首”位置
- OpenGL|OpenGL 绘制甜甜圈深度测试、多边形偏移、裁剪、 混合
- 把知识编成网纺成布