js Canvas 实现动态日历时钟实战教程

87 浏览量更新于2024-08-31 收藏 52KB PDF 举报

本文将深入探讨如何使用JavaScript (JS) 和 Canvas技术在网页上实现一个动态的日历时钟案例。首先，我们了解到该教程针对的是移动设备（如Android、iPhone和iPad）用户，因为代码中检查了浏览器的User-Agent字符串。通过这种方式，作者确保了时钟在不同移动设备上的兼容性。 HTML部分提供了基础结构，包括DOCTYPE声明、`<html>`标签，以及一个包含CSS样式和ID为"calendarWithTime"的`<canvas>`元素，这是Canvas绘制的主要容器。CSS设置了页面的通用样式，并隐藏了默认的边距和填充。 JavaScript部分定义了一个名为`calendarWithTime`的函数，这是一个核心逻辑的入口点。它初始化了一些关键变量： 1. `v`变量用于检测是否是移动设备，如果是，可能会对某些功能进行优化。 2. `appWidth`和`appHeight`分别获取浏览器可视区域的宽度和高度，减去3px是为了处理可能出现的滚动条。 3. `centerPoint`存储了屏幕的中心坐标，这对于定位元素位置非常有用。 4. `lastFpsUpdateTime`用于计算帧率，用于优化动画性能。 5. `caObj`和`ctxtObj`分别表示canvas对象和canvas context，这是在后续绘制时使用的。 6. `timeNow`记录当前的时间显示。 7. `startY`设置初始年份，这可能是时钟显示的一部分配置。接下来，`calendarWithTime.js`文件中会包含两个主要部分：`requestNextAnimationFrame.js`（可能是一个辅助库，用于处理动画帧）和`calendarWithTime.js`本身。在`calendarWithTime.js`中，预计会有以下步骤： - 初始化Canvas，设置其大小和样式。 - 创建并配置`ctxtObj`，设置绘图颜色、线宽等属性。 - 定义一个或多个方法来更新时间显示，可能包括获取当前时间、格式化时间显示、以及在Canvas上更新时间文本。 - 使用`requestAnimationFrame`函数创建一个动画循环，定期更新时间并重绘Canvas。 - 在动画循环中，检查与上一次更新时间的差值，计算帧率，以保持流畅的动画效果。 - 当页面大小改变时，响应式地调整Canvas的位置和大小，保持在屏幕中心显示。总结来说，这篇教程提供了一个实用的JavaScript和Canvas结合的实例，展示了如何创建一个在移动设备上运行的实时日历时钟。开发者可以借此了解如何利用Canvas进行基本的图形渲染，以及如何使用动画框架提高用户体验。对于希望学习和提升前端交互设计的开发者，这是一个很好的参考案例。

js Canvas实现的日历时钟案例分享实现的日历时钟案例分享

本文主要分享了js实现的日历时钟案例，具有一定的参考价值，下面跟着小编一起来看下吧

Html:

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

<style>

* {margin:0; padding:0;}

#calendarWithTime{

margin : 0;

}

</style>

</body>

</html>

js:

;var calendarWithTime = function(){

v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1;

// 浏览器可见区域

appWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);

appHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 3; // chrome下，高度一样是，会出现下拉滚动条

// 中心点

centerPoint = {'x':appWidth*0.5,'y':appHeight*0.5};

// 动画用

lastFpsUpdateTime = (+new Date);

// canvas对象

caObj = null;

// canvas context对象

ctxtObj = null;

// 现在时间

timeNow = "";

// 开始年份

startY = 1988;

init = function(){

window.onload=function(){this.initCanvas();}

}();

getDomId = function(id){return document.getElementById(id);}

initCanvas = function(id){

this.caObj = this.getDomId("calendarWithTime");

this.ctxtObj = this.caObj.getContext("2d");

// 全屏canvas

this.caObj.style.width = (this.appWidth+'px');

this.caObj.style.height = (this.appHeight+'px');

this.caObj.width = this.appWidth;

this.caObj.height = this.appHeight;

if (v) {

caObj.style.border = "none";

}

// 开始年份

startY = Math.floor((new Date()).getFullYear() / 8) * 8;

// test

// startY = Math.floor(2010 / 8) * 8;

this.lastFpsUpdateTime = (+new Date);

this.animate();

}

doDraw = function(){

this.ctxtObj.clearRect(0, 0, this.caObj.width, this.caObj.height);

var date = new Date();

// test

/*date.setDate(29);

date.setMonth(3);

date.setFullYear(2010);*/

var afterGap = 8 - (date.getFullYear() - startY);

var allYears = date.getFullYear()-this.startY+afterGap;

var allDays = this.getCountDays(date.getFullYear(),date.getMonth());

this.doDrawDayPanel(31,allDays);

this.doDrawMonthPanel();

this.doDrawYearPanel(this.startY,date.getFullYear(),afterGap);

// 画时间针

this.doDrawTPanel();

this.drawYMDHMS(0,0.35,0,0.1,date.getSeconds(),0,30,'s','');

this.drawYMDHMS(0,0.3,0,0.05,date.getMinutes(),date.getSeconds()/60,30,'m','');

this.drawYMDHMS(0,0.25,0,0.03,date.getHours() % 12,date.getMinutes()/60,6,'h','');

this.drawYMDHMS(0.4,0.7,0.4,0.66,date.getDate(),date.getHours()/24,Math.ceil(31*0.5),'d',date.getDate());

this.drawYMDHMS(0.4,0.6,0.4,0.568,(date.getMonth()),date.getDate()/(allDays+1),6,'M',date.getMonth()+1);

this.drawYMDHMS(0.4,0.55,0.4,0.52,(date.getFullYear() - this.startY),(date.getMonth()+1)/13,Math.ceil(allYears*0.5),'y',date.getFullYear());

// 显示时间

this.getTimeNow();

this.ctxtObj.save();

this.ctxtObj.beginPath();

this.ctxtObj.fillStyle = "#369";

this.ctxtObj.strokeStyle = "#369";

this.ctxtObj.font = "30px bold 微软雅黑";

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38675969

粉丝: 2
资源: 957

js Canvas 实现动态日历时钟实战教程

[canvas,js]日历时钟

CalendarCanvas:一个简单日历的画布实现

JS时间特效—很漂亮的日历

javascript canvas实现简易时钟例子

html5 canvas实现圆形时钟代码分享

【JavaScript源代码】JavaScript canvas实现文字时钟.docx

【JavaScript源代码】JavaScript canvas实现七彩时钟效果.docx

JavaScript canvas动画实现时钟效果

canvas实现粒子时钟效果

使用js和canvas实现时钟效果

最新资源