画布实现钟表"/>
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画布实现钟表
发布评论