avatar

目录
用canvas标签绘制一个实时时钟

前言

canvas是html5提供的一个新标签,标签本身只是个图形容器,它在支持html5的浏览器上可以用于绘制图形。

我们可以通过在JavaScript上为canvas标签绘制图形,通过各种方法去绘制路径来达到想要效果。

这篇博文以时钟为例,介绍canvas的一些基本操作。

浏览器支持

元素 谷歌浏览器 IE 火狐 Safari 欧朋
canvas 4.0 9.0 2.0 3.1 9.0

绘制时钟

标签结构

HTML中准备一个容器存放画布,在canvas标签内写上低版本浏览器才会显示的提示,支持的浏览器是看不见的,并为其设置宽高。

html
<canvas id="myClock" width="500" height="500"></canvas>


<p id="showDate"></p>

JavaScript

javascript

window.onload = function () {
//获取上下文对象
var canvas = document.getElementById('myClock');
var con = canvas.getContext('2d');
//自定义函数---画表盘,针
function toDraw() {
//定义原点和半径
var x = 250;
var y = 250;
var r = 150;
//绘制秒刻度开始
con.beginPath();
for (var i = 0; i < 60; i++) {
con.moveTo(x, y);//以圆心为起点
con.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180);//绘制一段6°的圆弧
}
con.closePath(); //为了不影响其他绘图,加上起始路径
con.stroke();
//较小的白色圆盘
con.fillStyle = '#fff';
con.beginPath();
con.moveTo(x, y);
con.arc(x, y, 0.95 * r, 0, 2 * Math.PI);
con.closePath();
con.fill(); //实心圆
//绘制秒刻度结束
//同理绘制小时刻度
con.beginPath();
con.lineWidth = 4; //加粗小时刻度
for (var i = 0; i < 12; i++) {
con.moveTo(x, y);
con.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180);
}
con.closePath(); //为了不影响其他绘图,加上起始路径
con.stroke();
//较小的白色圆盘
con.fillStyle = '#fff';
con.beginPath();
con.moveTo(x, y);
con.arc(x, y, 0.85 * r, 0, 2 * Math.PI);
con.closePath();
con.fill();
//绘制小时刻度结束

//获取当前系统时间
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById('showDate').innerHTML = hh+':'+mm+':'+ss;
//时针对应的弧度
var hhVal = (-90 + hh * 30 + mm / 2) * Math.PI / 180;
var mmVal = (-90 + mm * 6) * Math.PI / 180;
var ssVal = (-90 + ss * 6) * Math.PI / 180;
//开始绘制时、分、秒针(注意:考虑到针要以原点为中心旋转)
con.lineWidth = 5; //时针
con.beginPath();
con.moveTo(x, y);
con.arc(x, y, 0.5 * r, hhVal, hhVal);
con.closePath();
con.stroke();
con.lineWidth = 3; //分针
con.beginPath();
con.moveTo(x, y);
con.arc(x, y, 0.65 * r, mmVal, mmVal);
con.closePath();
con.stroke();
con.lineWidth = 1; //秒针
con.beginPath();
con.moveTo(x, y);
con.arc(x, y, 0.8 * r, ssVal, ssVal);
con.closePath();
con.stroke();
}
//每隔1秒调用一次函数
setInterval(toDraw, 1000);
}

以上js逻辑内容 来自大前端老李的博客,

文章作者: Bee
文章链接: http://thebee.fun/2020/06/09/bee47/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 The Bee
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论