HTML使用Canvas绘制动画时钟

么是Canvas

<canvas> 是HTML中的一个元素，它可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

<canvas>标签本身没有绘图能力，它仅仅是图形的容器。在HTML，一般通过Javascript语言来完成实际的操作。

创建HTML页面并添加绘图容器

本文通过Javascript操作Canvas制作一个简单的显示当前时间的动画时钟，了解和学习简单的canvas用法，仅以抛砖引玉。

首先创建一个HTML文件，为了方便管理，使用一个div标签包裹两个canvas标签，并加上一些简单的css样式。

<!doctype html>
<html lang="zh-cn">
<head><title>Canvas绘制动画时钟</title>
<style>
html,body{margin:0;padding:0}
#clockWrap {
	position: relative;
}
canvas {
	position: absolute;
}
#clock-ui {
	z-index: 2;
}
#clock-plate {
	z-index: 1;
}
</style>
</head>
<body>
  <div id="clockWrap">
  <canvas id="clock-plate"></canvas>
  <canvas id="clock-ui"></canvas>
</div>
<script></script>
</body></html>

本示例中使用了两个canvas标签（为什么使用两个，一个不是更简单吗？），一个用于绘制钟面，一个根据当前时间实时显示和更新时针、分针和秒针的动态指向。好了，话不多说，开干。

绘制钟面刻度

一个简单的时钟，可以分为钟面上的刻度和指针。其中刻度和12个数字是固定的，我们可以将它们绘制在当作背景的canvas上（示例中id为clock-plate的canvas）。

（1）要使用canvas，首先必须通过容器获取渲染上下文：

var $=function(id){return document.querySelector(id);}//这个函数只是为了方便获取dom元素
const canvasbg=$("#clock-plate"),
      canvas=$("#clock-ui"),
      ctx = canvasbg.getContext("2d"),//背景容器上下文
      ctxUI = canvas.getContext("2d");//指针容器上下文，后面代码要用
//定义画布宽度和高度，时钟圆直径，并设置画布大小
const oW=1000,oH=800,cW=400,r=cW/2,oX=oW/2,oY=oH/2;
canvas.width=oW;
canvas.height=oH;
canvasbg.width=oW;
canvasbg.height=oH;

（2）画钟的边框，为了好看，这里画两个圈：

 //画出时钟外圆框
  ctx.lineWidth = 12;
	ctx.beginPath();
	ctx.arc(oX, oY, r+14, 0, 2 * Math.PI);
	ctx.stroke();
	ctx.closePath();
	ctx.lineWidth = 8;
	//画出时钟内圆框（刻度圈）
	ctx.beginPath();
	ctx.arc(oX, oY, r, 0, 2 * Math.PI);
	ctx.stroke();
	ctx.closePath();
	ctx.beginPath();

边框效果图

（3）绘制刻度线和数字，可以利用三角函数计算出每个刻度的坐标：

利用三角函数计算刻度线的坐标位置

钟面上有12个大格，从正上方12开始，它们的度数分别是270，300，330，0，30，60，90，120，150，180，210，240。然后利用JS的Math.sin和Math.cos分别计算出各大格的坐标。注意：js中Math.sin()和Math.cos()的参数不是角度数是弧度。可以使用Math.PI/180*角度来转化，比如将30度转换成弧度=Math.PI/180*30

//绘制钟表中心点
	ctx.beginPath();
	ctx.arc(oX, oY, 8, 0, 2 * Math.PI);//圆心
	ctx.fill();
	ctx.closePath();
	//设置刻度线粗细度
	ctx.lineWidth = 3;
	//设置钟面12个数字的字体、大小和对齐方式
	ctx.font = "30px serif";
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	var kdx,kdy;
	//绘制12个大刻度和12个数字
	//为方便计算，先定义了0-11这12个刻度对应的度数，也可以直接定义对应的弧度。
	const hd=Math.PI/180，degr=[270,300,330,0,30,60,90,120,150,180,210,240];
	for(var i=0;i<12;i++){
		kdx=oX+Math.cos(hd*degr[i])*(r-3);
		kdy=oY+Math.sin(hd*degr[i])*(r-3);
		ctx.beginPath();
		ctx.arc(kdx, kdy, 6, 0, 2 * Math.PI);//画圆形大刻度
		ctx.fill();
    //绘制刻度对应的数字
		ctx.strokeText(i==0? 12 : i,oX+Math.cos(hd*degr[i])*(r-24),oY+Math.sin(hd*degr[i])*(r-24));
		ctx.closePath();
	}
	
	//绘制小刻度
	ctx.lineWidth = 2;
	for(var i=0;i<60;i++){
		if(i % 5 == 0) continue;//跳过与刻度重叠的刻度
		x0=Math.cos(hd*i*6);
		y0=Math.sin(hd*i*6);
		ctx.beginPath();
		ctx.moveTo(oX+x0*(r-10), oY+y0*(r-10)); 
		ctx.lineTo(oX+x0*r, oY+y0*r); //画短刻度线
		ctx.stroke(); 
		ctx.closePath();
	}

效果如图：

钟面效果图

（4）根据当前时间绘制指针

习惯上，时针粗短，分针略粗而长，秒针细长。为加大区别，示例中秒针细长并且绘制成红色。

function drawHp(i){//绘制时针
	const x0=Math.cos(hd*i*30),y0=Math.sin(hd*i*30);
	drawPointer(oX,oY,oX+x0*(r-90),oY+y0*(r-90),10,"#000000");
}
function drawMp(i){//绘制分针
	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
	drawPointer(oX,oY,oX+x0*(r-60),oY+y0*(r-60),5,"#000000");
}
function drawSp(i){//绘制秒针
	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
	drawPointer(oX,oY,oX+x0*(r-20),oY+y0*(r-20),2,"#FF0000");
}
//抽取出绘制三种指针时共同的部分，注意指针绘制在渲染上下文ctxUI中
function drawPointer(ox,oy,tx,ty,width,color){
	ctxUI.strokeStyle = color;
	ctxUI.lineCap = "round";
	ctxUI.lineWidth = width;
	ctxUI.beginPath();
	ctxUI.moveTo(ox, oy);
	ctxUI.lineTo(tx,ty);
	ctxUI.stroke();
	ctxUI.closePath();
}

现在已经有了绘制三种指针的方法，参数是当前时间的时、分和秒，将根据它们的值确定指针的坐标。不过，因为使用的是默认的convas坐标体系，0值实际指向3的位置，需要小小的修正一下。

window.requestAnimationFrame(function fn(){
		var d = new Date();
		ctxUI.clearRect(0,0,oW,oH);
		//度数从0开始，而0在3刻度（15分/秒位置），修正为全值减15，如果小于0则修正回来
    var hour=d.getHours(),minute=d.getMinutes()-15,second=d.getSeconds()-15;
		hour=hour>11? hour-15 : hour-3;
		drawHp(hour>=0? hour : 12+hour);
		drawMp(minute>=0? minute : 60+minute);
		drawSp(second>=0? second : 60+second);
		window.requestAnimationFrame(fn);
});

接下来，调用window.requestAnimationFrame，在其中绘制并更新指标的位置。看看效果如何：

指针绘制情况与实际时间相符

貌似效果有了，截图时电脑上的时间是10时17分，指针绘制上，时针指向10时，分针指向17。嗯，感觉有点别扭？对了，时针和分针怎么是端端正正地指向它们的整时整分刻度上呢？实际钟表上时针和分针是展示动态进度的，此时时针应该越过10时的位置才对。没关系，我们在绘制时针和分针时别点东西，让它的角度值加上分针和秒针的值试试。

//修改后的绘制三种指针的方法
function drawHp(i,f,m){//绘制时针，参数：时，分，秒
	const x0=Math.cos(hd*(i+(f/60)+(m/600))*30),y0=Math.sin(hd*(i+(f/60)+(m/600))*30);
	drawPointer(oX,oY,oX+x0*(r-90),oY+y0*(r-90),10,"#000000");
}
function drawMp(i,f){//绘制分针，参数，分，秒
	const x0=Math.cos(hd*(i+(f/60))*6),y0=Math.sin(hd*(i+(f/60))*6);
	drawPointer(oX,oY,oX+x0*(r-60),oY+y0*(r-60),5,"#000000");
}
function drawSp(i){//绘制秒针
	const x0=Math.cos(hd*i*6),y0=Math.sin(hd*i*6);
	drawPointer(oX,oY,oX+x0*(r-20),oY+y0*(r-20),2,"#FF0000");
}

再来看看效果，嗯，立竿见影呀：

指针指向更合理了

到此为止，canvas绘制一个简易时钟就完成了。下面继续优化一下。刚才使用requestAnimationFrame方法即时更新绘制情况。这个方法与刷新率有关，看看mdn上面怎么说的：

window.requestAnimationFrame() 方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。
对回调函数的调用频率通常与显示器的刷新率相匹配。虽然 75hz、120hz 和 144hz 也被广泛使用，但是最常见的刷新率还是 60hz（每秒 60 个周期/帧）。为了提高性能和电池寿命，大多数浏览器都会暂停在后台选项卡或者隐藏的 <iframe> 中运行的 requestAnimationFrame()。

本示例中，更新指针的位置并不需要很高的刷新频率，可以通过节流进行一下优化：

var fps = 5, fpsInterval = 1000 / fps,lastTime = new Date().getTime(); //记录上次执行的时间
function runStep() {
    requestAnimationFrame(runStep);
    var d=new Date(),now = d.getTime()
    var elapsed = now - lastTime;
    if (elapsed > fpsInterval) {
				ctxUI.clearRect(0,0,oW,oH);
        lastTime = now - (elapsed % fpsInterval); 
			//度数从0开始，而0在3刻度（15分/秒位置），修正为全值-15，如果小于0则用60减回
        var hour=d.getHours(),minute=d.getMinutes()-15,second=d.getSeconds()-15;//console.log(d.getSeconds(),second);
        hour=hour>11? hour-15 : hour-3;
        drawHp(hour>=0? hour : 12+hour,minute+15,second+15);
        drawMp(minute>=0? minute : 60+minute,second+15);
        drawSp(second>=0? second : 60+second);
    }
}
runStep();

当然，实现时钟的方法是很多，比如可以使用画布的旋转（rotate方法）来实现指针的动态转动等等。

完整HTML+JS源码：

<html>
<head>
<title>图文混排</title>
<style type="text/css">
<!--
body{
    background-color:543b32; /* 页面背景颜色 */
    margin:0px;
    padding:0px;
}
img{
    float:left; /* 文字环绕图片 */
}
p{
    color:#FFFF00; /* 文字颜色 */
    margin:0px;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
}
span{
    float:left; /* 首字放大 */
    font-size:85px;
    font-family:黑体;
    margin:0px;
    padding-right:5px;
}
-->
</style>
</head>
<body>
<img src="hop.jpg" border="0">
<p><span>河</span>马，偶蹄目、河马科，英文名hoppopotamus。原来遍布非洲所有深水的河流与溪流中，现在范围已缩小，主要居住在非洲热带的河流间。它们喜欢栖息在河流附近沼泽地和有芦苇的地方。生活中的觅食、交配、产仔、哺乳也均在水中进行。</p>
<p>河马的特点是吻宽嘴大，四肢短粗、躯体象个粗圆桶。胃3室不反刍。鼻孔在吻端上面，与上方的眼睛和耳朵呈一条直线。这样它全体潜伏水中只须将头顶露出水面就能嗅、视、听兼呼吸了。体长3.75-4.6米，尾长约56厘米，肩高约1.5米，体重3-4.6吨，下犬齿长约60厘米，可重达3公斤。河马皮肤排出的液体含红色色素，经皮肤反射显得象是红色的，引起了河马出“血汗”的说法。</p>
<p>河马极善游泳，在受惊时，一般避入水中。每天大部分时间在水中，潜伏水下时一般每3、5分钟把头露出水面呼吸一次，但可潜伏约半小时不出水面来换气。它们的皮肤长时间离水会干裂。河马成对或结成小群活动，老年雄性常单独活动。夜行性：它们几乎整个白天都在河水中或是河流附近睡觉或休息，晚上出来吃食，有时会顺水游出30多公里觅食。主要以水生植物为食；偶食陆地作物，以草为主，有时到田地去吃庄稼，食物短缺时，它们也吃肉，据称，河马是路地上最大的食肉动物(杂食)。河马无定居：不在一个地方长期停留，每隔数日便迁到新地方去。</p>
<p>河马繁殖期不固定,全年均繁殖,每产一仔,孕期227-240天，仔兽出生时体重27-45公斤。在人为饲养下约3岁性成熟，在野外5、6岁成熟。寿命40-50年。河马的皮下脂肪约5厘米厚。人们常猎杀它取其脂肪、肉和厚皮。脂肪可得90公斤。当地人非常珍视它的肉，肉味略同于野猪肉。牙齿质量也很好,是珍贵的雕刻材料，可作为象牙替代品。</p>
</body>
</html>

#34;夏哉ke"：quangneng.com/5065/

HTML5的介绍和案例实战

HTML5 是 HTML 的第五个主要版本，是用于构建和呈现网页内容的最新标准。它引入了许多新特性和改进，使得开发者能够创建更丰富、更交互性的网页应用。HTML5 的一些主要特性包括：

语义化标记： HTML5 引入了许多新的语义化标签，如 <header>, <footer>, <nav>, <article> 等，使得开发者能够更清晰地描述网页的结构，有助于搜索引擎优化（SEO）和可访问性（Accessibility）。
多媒体支持： HTML5 提供了原生支持音频和视频的 <audio> 和 <video> 标签，不再需要依赖第三方插件如 Flash。开发者可以直接在网页中嵌入音频和视频，并控制播放、暂停等操作。
Canvas 绘图： HTML5 的 <canvas> 元素允许开发者使用 JavaScript 绘制图形、动画和其他视觉效果。Canvas 提供了一种灵活的方式来创建交互式图形，如游戏、数据可视化等。
本地存储： HTML5 引入了 Web Storage 和 IndexedDB，允许开发者在客户端存储数据，而无需依赖服务器。这对于创建离线应用程序和提高性能有很大帮助。
响应式设计： HTML5 提供了更好的支持响应式设计的能力，使得网页能够适应不同设备的屏幕大小和分辨率，提供更好的用户体验。
Web 组件： HTML5 引入了 Web Components，允许开发者创建可重用的自定义 HTML 元素，从而提高开发效率和代码复用性。
更严格的语法和错误处理： HTML5 规范对 HTML 的语法进行了更新和优化，使得浏览器能够更好地处理语法错误，并提供更准确的错误提示。

案例实战可以是：

音乐播放器应用： 使用 HTML5 的 <audio> 标签和 JavaScript，创建一个简单的音乐播放器应用，允许用户播放、暂停和切换音乐。
图像画廊： 使用 HTML5 的 <canvas> 元素和 JavaScript，在网页上创建一个交互式的图像画廊，允许用户查看和缩放图片。
在线游戏： 使用 HTML5 和 Canvas 绘图功能，开发一个简单的在线游戏，如拼图、打砖块等，展示 HTML5 在游戏开发中的应用。
数据可视化应用： 使用 HTML5、CSS 和 JavaScript，创建一个数据可视化应用，展示数据图表、地图等，并允许用户与数据进行交互。
响应式网站： 使用 HTML5 和 CSS3，创建一个响应式网站，使得网页能够在不同设备上自适应布局，并提供良好的用户体验。

这些案例实战可以帮助开发者熟悉 HTML5 的各种特性和用法，并在实际项目中应用它们来构建丰富、交互性强的网页应用。

CSS3的介绍和案例实战

CSS3 是 CSS 的第三个主要版本，是用于样式化网页内容的最新标准。它引入了许多新特性和改进，使得开发者能够创建更漂亮、更交互性的网页设计。CSS3 的一些主要特性包括：

新的选择器： CSS3 引入了许多新的选择器，如属性选择器、伪类选择器和伪元素选择器，使得开发者能够更精确地选中文档中的元素，并对其应用样式。
盒子模型： CSS3 提供了更灵活的盒子模型，允许开发者使用 box-sizing 属性控制盒子的尺寸计算方式，包括 content-box 和 border-box，从而更方便地设计布局。
圆角和阴影： CSS3 提供了 border-radius 属性和 box-shadow 属性，使得开发者能够轻松地为元素添加圆角和阴影效果，增强页面的美观度。
渐变和背景图像： CSS3 允许开发者使用线性渐变和径向渐变来创建平滑的过渡效果，同时支持多个背景图像叠加，使得页面的背景更加丰富多彩。
动画和过渡： CSS3 提供了 @keyframes 规则和 transition 属性，使得开发者能够创建简单的动画和过渡效果，而无需使用 JavaScript 或 Flash。
响应式布局： CSS3 提供了媒体查询（Media Queries）功能，允许开发者根据设备的特性和屏幕大小来应用不同的样式，从而创建响应式布局的网页设计。
字体和文本效果： CSS3 支持自定义字体（@font-face），以及文本阴影、文字溢出效果等，使得开发者能够更加灵活地设计文本样式。
Flexbox 和 Grid 布局： CSS3 引入了 Flexbox 和 Grid 布局模型，使得开发者能够更方便地设计复杂的网页布局，实现水平和垂直居中、自适应布局等功能。

案例实战可以是：

响应式导航菜单： 使用 CSS3 的媒体查询和动画效果，创建一个响应式导航菜单，在不同设备上呈现不同的布局和样式。
图片展示画廊： 使用 CSS3 的过渡和渐变效果，创建一个图片展示画廊，实现图片的平滑过渡和点击放大效果。
卡片式布局： 使用 CSS3 的 Flexbox 或 Grid 布局，创建一个卡片式布局的网页，实现卡片的等高排列和自适应布局。
轮播图效果： 使用 CSS3 的动画效果，创建一个简单的轮播图效果，实现图片的自动切换和淡入淡出动画。
按钮样式设计： 使用 CSS3 的边框样式、阴影效果和渐变背景，设计一组漂亮的按钮样式，增强用户交互体验。

这些案例实战可以帮助开发者熟悉 CSS3 的各种特性和用法，并在实际项目中应用它们来实现各种炫酷的网页设计效果。

JavaScript的介绍和案例实战：

JavaScript 是一种高级的、动态的、解释性的编程语言，主要用于为网页添加交互性和动态功能。它是 Web 开发中最常用的脚本语言之一，可以直接嵌入到 HTML 中，也可以作为外部文件引入到 HTML 页面中。

JavaScript 的特点包括：

客户端脚本语言： JavaScript 主要运行在用户的浏览器中，用于处理网页的交互逻辑，与用户进行实时的交互。
轻量级和灵活性： JavaScript 的语法简洁明了，学习曲线较为平缓，开发者可以快速上手。同时，JavaScript 也是一种灵活的语言，支持多种编程范式，如面向对象编程（OOP）、函数式编程等。
事件驱动和异步编程： JavaScript 是一种事件驱动的语言，可以通过监听用户的交互事件（如点击、滚动、键盘输入等）来触发相应的操作。同时，JavaScript 也支持异步编程模式，通过回调函数、Promise 或 async/await 等机制来处理异步操作，保持页面的流畅性和响应性。
跨平台性： 由于 JavaScript 运行在浏览器中，因此具有较好的跨平台性，无论是在 Windows、macOS、Linux 还是移动设备上，都能够正常运行。
丰富的生态系统： JavaScript 生态系统非常丰富，拥有大量的开源库和框架，如jQuery、React、Angular、Vue.js 等，可以帮助开发者快速构建复杂的 Web 应用程序。

案例实战可以是：

交互式表单验证： 使用 JavaScript 实现表单的实时验证功能，包括验证必填字段、邮箱格式、密码强度等，并在用户输入不符合要求时给出相应的提示信息。
图片轮播效果： 使用 JavaScript 编写轮播图组件，实现图片的自动播放、手动切换、指示器显示等功能，提升网页的视觉效果和用户体验。
无限滚动加载： 使用 JavaScript 监听页面滚动事件，当用户滚动到页面底部时，自动加载更多的内容，实现无限滚动效果，提升页面的内容呈现效果。
实时搜索功能： 使用 JavaScript 编写实时搜索组件，当用户在搜索框中输入关键字时，自动展示匹配的搜索结果，并支持关键字高亮显示，提升搜索体验。
模态框和弹出窗口： 使用 JavaScript 编写模态框（Modal）或弹出窗口（Popup）组件，实现在页面上弹出特定内容的交互式窗口，如登录框、消息提示框等。

这些案例实战可以帮助开发者熟悉 JavaScript 的语法和常用操作，理解 JavaScript 在网页开发中的应用场景，从而更好地运用 JavaScript 来实现各种动态和交互式的功能。

在线咨询

上一篇：php的HTML输入和输出复杂净化
下一篇：Python Matplotlib直方图：揭秘数据分布可视化的艺术

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML使用Canvas绘制动画时钟

么是Canvas

创建HTML页面并添加绘图容器

绘制钟面刻度

您的项目需求