利用canvas画钟表

canvas （HTML5新增标签）

**什么是canvas？

Canvas
API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

首先贴出最终结果，个人认为难度不大，但是通过做这个demo，可以锻炼我们阅读文档，分析问题的能力。接下里会写出思考过程，希望对大家能有帮助，通识也是我自己加深印象的过程。

第一步-表盘所需要的几何知识

三个指针旋转的角度是如何计算的。
表盘是如何生成的。
十二个小时数字是如何生成的。

第二步-Canvas外边框圆形

定义画圆方法，执行方法：
1）重新映射画布上的 (0,0) 位置，ctx.translate(r,r);
2）起始一条路径，ctx.beginPath();
3）开始画圆：ctx.arc(0,0,r,0,2*Math.PI,false);参数：圆点坐标x、y，起始弧度sAngle、eAngle，是否逆时针
4）绘制已定义的路径：ctx.stroke();默认1px；

    var dom = document.getElementById("clock");var ctx = dom.getContext("2d");var width = ctx.canvas.width;var height = ctx.canvas.height;var r = width / 2;var BL = width / 200;

    function drawBackGrounf() {ctx.save();//保存一下最开始时钟的环境ctx.translate(r, r);//矩形的中心点ctx.beginPath();ctx.lineWidth = 10 * BL;//线要 乘上 比例ctx.arc(0, 0, r - ctx.lineWidth / 2, 2 * Math.PI, false);//乘上比例ctx.stroke();// ctx.fillStyle="#00000a";

第三步-绘制表盘里的内容

这里需要写三个函数，我们需要写小时、分钟、秒的指针的函数完整代码我回粘贴在文章最后。

第四步-时分秒

写到这里脑子像浆糊一样，可见我对此内容掌握的并不是很好。

//画时针function drawHour(hour,minute){ctx.save();//保存当前环境的状态ctx.beginPath();//画出竖着的那个时针的线var rad = 2 * Math.PI / 12 * hour ;//时针旋转的弧度var mrad  = 2 * Math.PI / 12 / 60 * minute;//分针旋转的弧度ctx.rotate(rad + mrad);ctx.lineWidth = 6 ;//定义时针线的宽度ctx.lineCap = "round";//设置时针线端点为圆的ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 ctx.lineTo(0,-r/2); //画出这条线ctx.stroke(); //最终画出这条时针线ctx.restore();//返回之前保存过的路径状态和属性}//画分针     function drawMinute(minute){ctx.save();//保存当前环境的状态ctx.beginPath();//画出竖着的那个时针的线var rad = 2 * Math.PI / 60 * minute ;//需要旋转的弧度ctx.rotate(rad);ctx.lineWidth = 3 ;//定义分针线的宽度ctx.lineCap = "round";//设置时针线端点为圆的ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 ctx.lineTo( 0 , -r + 30); //画出这条线ctx.stroke(); //最终画出这条时针线ctx.restore();//返回之前保存过的路径状态和属性}//画秒针        function drawSecond(second){ctx.save();//保存当前环境的状态ctx.beginPath();//画出竖着的那个时针的线ctx.fillStyle = "#c14543";//填充为红色var rad = 2 * Math.PI / 60 * second ;//需要旋转的弧度

第五步-对表盘进行美化

1.不用的功能通过不同的函数来实现，通过给函数传入时间参数来实现表针的转动；
2.通过定义比例尺来实现缩放的比例不变；
3.通过rem设置比例，让时钟按画布大小的比例显示

那么最后贴出完整的代码`

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>div {text-align: center;margin-top: 150px;}#clock {/* border: 1px solid #000; */}</style>
</head><body><div><canvas id="clock" height="300px" width="300px"></canvas></div><script>var dom = document.getElementById("clock");var ctx = dom.getContext("2d");var width = ctx.canvas.width;var height = ctx.canvas.height;var r = width / 2;var BL = width / 200;function drawBackGrounf() {ctx.save();//保存一下最开始时钟的环境ctx.translate(r, r);//矩形的中心点ctx.beginPath();ctx.lineWidth = 10 * BL;//线要 乘上 比例ctx.arc(0, 0, r - ctx.lineWidth / 2, 2 * Math.PI, false);//乘上比例ctx.stroke();// ctx.fillStyle="#00000a";// ctx.fill();var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];ctx.font = 18 * BL + 'px Arial';//字体也有乘比例 字符串拼接ctx.textAlign = 'center';ctx.textBaseline = 'middle';hourNumber.forEach(function (number, i) {var rad = 2 * Math.PI / 12 * i;var x = Math.cos(rad) * (r - 30 * BL);var y = Math.sin(rad) * (r - 30 * BL);ctx.fillText(number, x, y);});for (var i = 0; i < 60; i++) {var rad = 2 * Math.PI / 60 * i;var x = Math.cos(rad) * (r - 18 * BL);var y = Math.sin(rad) * (r - 18 * BL);ctx.beginPath();if (i % 5 == 0) {ctx.fillStyle = '#000';ctx.arc(x, y, 2 * BL, 0, 2 * Math.PI, false);} else {ctx.fillStyle = '#ccc';ctx.arc(x, y, 2 * BL, 0, 2 * Math.PI, false);}ctx.fill();}}function drawHour(hour, minute) {ctx.save(); //保存我们当前的环境ctx.beginPath();var rad = 2 * Math.PI / 12 * hour;//需要旋转的弧度；var mrad = 2 * Math.PI / 12 / 60 * minute;ctx.rotate(rad + mrad);//旋转ctx.lineWidth = 6 * BL;//定义指针的宽ctx.lineCap = 'round';//指针顶部为弧ctx.moveTo(0, 10 * BL);ctx.lineTo(0, -r / 2 );ctx.stroke();ctx.restore();//还原我们画小时之前的状态}function drawMinutes(minutes) {ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 60 * minutes;//需要旋转的弧度；ctx.rotate(rad);//旋转ctx.lineWidth = 3 * BL;//定义指针的宽ctx.lineCap = 'round';//指针顶部为弧ctx.moveTo(0, 10 * BL);ctx.lineTo(0, -r + 30 * BL);ctx.stroke();ctx.restore();}function drawSecond(second) {ctx.save();ctx.beginPath();ctx.fillStyle = 'red';var rad = 2 * Math.PI / 60 * second;//需要旋转的弧度；ctx.rotate(rad);//旋转ctx.moveTo(-2 * BL, 20 * BL);//画出一个秒针 x轴-2 y轴20ctx.lineTo(2 * BL, 20 * BL);ctx.lineTo(1, -r + 18 * BL);ctx.lineTo(-1, -r + 18 * BL);ctx.fill();// ctx.stroke();ctx.restore();}function drawYd() {//画一个原点ctx.beginPath();ctx.fillStyle = '#fff';ctx.arc(0, 0, 3 * BL, 0, 2 * Math.PI, false);ctx.fill();}function draw() {ctx.clearRect(0, 0, width, height);//每秒清除一下cancas，然后再画出背景、小时、分针、秒针 给他还原var now = new Date();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();drawBackGrounf();//画一个表盘drawHour(hour, minute);drawMinutes(minute);drawSecond(second);drawYd();//画一个原点ctx.restore();}draw();setInterval(draw, 1000);</script>
</body></html>`

利用canvas画钟表相关推荐

如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
关于利用canvas画带箭头的直线旋转
利用canvas在Vue项目中使用: <imgid="range_right"src=""style="position: absolute;l ...
利用canvas画一个万花筒血轮眼的钟表
效果图: 完整代码如下: Document <script>const cvs = document.getElementById("cvs");const huabi ...
利用canvas实现钟表效果
今天学习了基础的canvas,发现canvas很有意思,具体的知识点先不总结,等我学完了一起总结,先上一个自己写的小实例,嗯.直接上代码 <!DOCTYPE html> <html ...
Android利用canvas画各种图形
为什么80%的码农都做不了架构师?>>> 1.首先说一下canvas类: Class Overview The Canvas class holds the "dra ...
Android用Canvas画钟表仪
在MainActivity中自定义一个View,重写OnDraw()方法即可实现下图效果: 代码如下: public class MainActivity extends AppCompatActiv ...
微信小程序利用canvas画出根据文字自适应的边框
1.需求生成海需要画出一个中空带边框的的tag,如下图.众所周知,微信小程序里的canvas画图都是需要自己一点点画出来,不想html有htmlToCanvas,直接写HTML就可以转成canvas ...
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
Android利用canvas画各种图形(点、直线、弧、圆、扁圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
uni-app 利用canvas画简单海报并保存图片
一.效果图二.代码 <template><view class="canvas-box"><canvas class="canvas&q ...