画布实现钟表"/>
html5 canvas画布实现钟表
html5 canvas画布实现钟表
实现思路：
先创建画布，在画布中创建一个圆，然后创建出 时钟刻度和分钟刻度，以及时间，时针、分针、秒针所在的位置，用时间函数封装。
第一步：创建画布并创建圆
<body><canvas id="myCanvas" width="400" height="400"></canvas>
</body>
<script>var cxt = myCanvas.getContext('2d');function clock() { cxt.clearRect(0, 0, 400, 400);cxt.beginPath() //绘图开始路径cxt.arc(200, 200, 150, 0, Math.PI * 2, true); //绘制圆cxt.stroke();cxt.closePath();
第二步：创建分钟刻度和时钟刻度
//小时刻度for (var i = 0; i < 12; i++) {cxt.save(); //用来保存改变基点的位置cxt.beginPath();cxt.translate(200, 200); //改变画布基点cxt.rotate(Math.PI / 6 * i); //旋转cxt.moveTo(0, -150); cxt.lineTo(0, -130);cxt.lineWidth = "4";cxt.stroke()cxt.closePath();cxt.restore(); //恢复}//分钟刻度for (var i = 0; i < 60; i++) {cxt.save(); //用来保存改变基点的位置cxt.beginPath();cxt.translate(200, 200); //改变画布基点cxt.rotate(Math.PI / 30 * i); //旋转cxt.moveTo(0, -150);cxt.lineTo(0, -140);cxt.lineWidth = "3";cxt.stroke()cxt.closePath();cxt.restore(); //恢复}
第三步：获取当前的时间
//获取时间let date = new Date(); //获取当前时间let hours = date.getHours(); //小时let minutes = date.getMinutes(); //分钟let seconds = date.getSeconds(); //秒hours = hours + (minutes / 60);//小时=小时+当前的分钟数let hours12 = hours > 12 ? hours - 12 : hours;
第四步：显示刻度对应的数字
//数字for (var i = 1; i < 13; i++) { //1~12遍历cxt.save(); //用来保存改变基点的位置cxt.beginPath(); //开始创建路径cxt.translate(200, 200); //改变基点cxt.font = "20px Georgia"; //字体大小 和样式cxt.rotate(-Math.PI / 6 * (i - 1)); //旋转30度cxt.fillText((13 - i), -7, -115); //填充内容为1~12的数字cxt.closePath(); //结束路径cxt.restore(); //恢复}
第五步：创建秒针，分针，时针
//秒针cxt.save()cxt.beginPath();cxt.translate(200, 200); //改变基点cxt.strokeStyle = "red"; //边框颜色cxt.rotate(seconds * Math.PI / 30); //旋转秒数一次6度cxt.moveTo(0, 0);cxt.lineTo(0, -80);cxt.stroke();cxt.closePath();cxt.restore();//分针cxt.save()cxt.beginPath();cxt.translate(200, 200); //改变基地cxt.strokeStyle = "blue";cxt.lineWidth = "3";cxt.rotate(minutes * Math.PI / 30); //旋转秒数一次6度cxt.moveTo(0, 0);cxt.lineTo(0, -60);cxt.stroke();cxt.closePath();cxt.restore();//时针cxt.save()cxt.beginPath();cxt.translate(200, 200); //改变基地cxt.strokeStyle = "black";cxt.lineWidth = "4";cxt.rotate(hours * Math.PI / 6)//旋转秒数一次30度cxt.moveTo(0, 0);cxt.lineTo(0, -40);cxt.stroke();cxt.closePath();cxt.restore();}clock();setInterval(function() {clock();}, 1000);
以上就是钟表实现，样式可随以添加
更多推荐
html5 canvas画布实现钟表
发布评论