<canvas>定义图形，如图表和其他图形，它也是一个容器，需要脚本来绘制图像。
首先我们来分析做一个动态时钟的需求：
1. 需要一块画布
2. 需要一个大的表盘，一个小的固定时针分针秒针的圈
3. 需要长短不一的刻度
4. 需要会动的时针，分针，秒针
如图：
我们先解决需求1：需要一块画布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#canvas {
background-color: powderblue;
}
</style>
</head>
<body>
<!--设置画布高和宽 -->
<canvas id="canvas" height="400px" width="400px"></canvas>
</body>
</html>运行代码结果如下：
现在我们来解决需求2： 需要一个大的表盘，一个小的固定时针分针秒针的圈
在<head>标签内添加脚本
<script>
//页面加载完运行
window.onload = function() {
//设置画布为2d
var ctx = document.getElementById("canvas").getContext("2d");
//调用方法
dClock();
function dClock() {
//外表盘开始路径
ctx.beginPath();
//线条宽度
ctx.lineWidth = 2;
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 200, 0, 360);
//绘制
ctx.stroke();
//将开始点和结束点相连
ctx.closePath();
//内圈圈
ctx.beginPath();
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 8, 0, 360);
//绘制
ctx.stroke();
}
}
</script>运行结果：
下面我们来解决需求3 ：需要长短不一的刻度
<script>
//页面加载完运行
window.onload = function() {
//设置画布为2d
var ctx = document.getElementById("canvas").getContext("2d");
//调用方法
dClock();
function dClock() {
//外表盘开始路径
ctx.beginPath();
//线条宽度
ctx.lineWidth = 2;
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 200, 0, 360);
//绘制
ctx.stroke();
//将开始点和结束点相连
ctx.closePath();
//内圈圈
ctx.beginPath();
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 8, 0, 360);
//绘制
ctx.stroke();
//绘制刻度(时刻度)
//将表盘分成12格
for(var i = 0; i < 12; i++) {
//开始路径
ctx.beginPath();
//保存画笔设置
ctx.save();
//转换画布的用户坐标系统
ctx.translate(200, 200);
//设置旋转角度
ctx.rotate(i * 30 * Math.PI / 180);
//画笔移至到指定位置
ctx.moveTo(0, 175);
//画笔结束位置
ctx.lineTo(0, 200);
//绘制
ctx.stroke();
//将绘图状态置为保存值
ctx.restore();
//将开始位置和结束位置相连
ctx.closePath();
}
//绘制刻度(分刻度) （方法同时刻度）
for(var i = 0; i < 60; i++) {
ctx.beginPath();
ctx.save();
ctx.translate(200, 200);
ctx.rotate(i * 6 * Math.PI / 180);
ctx.moveTo(0, 190);
ctx.lineTo(0, 200);
ctx.stroke();
ctx.restore();
ctx.closePath();
}
}
}
</script>运行结果：
下面我们来解决需求4： 需要会动的时针，分针，秒针
<script>
//页面加载完运行
window.onload = function() {
//设置画布为2d
var ctx = document.getElementById("canvas").getContext("2d");
//调用方法
dClock();
function dClock() {
//外表盘开始路径
ctx.beginPath();
//线条宽度
ctx.lineWidth = 2;
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 200, 0, 360);
//绘制
ctx.stroke();
//将开始点和结束点相连
ctx.closePath();
//内圈圈
ctx.beginPath();
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 8, 0, 360);
//绘制
ctx.stroke();
//绘制刻度(时刻度)
//将表盘分成12格
for(var i = 0; i < 12; i++) {
//开始路径
ctx.beginPath();
//保存画笔设置
ctx.save();
//转换画布的用户坐标系统
ctx.translate(200, 200);
//设置旋转角度
ctx.rotate(i * 30 * Math.PI / 180);
//画笔移至到指定位置
ctx.moveTo(0, 175);
//画笔结束位置
ctx.lineTo(0, 200);
//绘制
ctx.stroke();
//将绘图状态置为保存值
ctx.restore();
//将开始位置和结束位置相连
ctx.closePath();
}
//绘制刻度(分刻度) （方法同时刻度）
for(var i = 0; i < 60; i++) {
ctx.beginPath();
ctx.save();
ctx.translate(200, 200);
ctx.rotate(i * 6 * Math.PI / 180);
ctx.moveTo(0, 190);
ctx.lineTo(0, 200);
ctx.stroke();
ctx.restore();
ctx.closePath();
}
//获取系统时间
var nowTime = new Date();
//获取当前小时
var hours = nowTime.getHours();
//获取当前分钟
var minutes = nowTime.getMinutes();
//获取秒
var seconds = nowTime.getSeconds();
//将24小时转为12小时
hours = hours > 12 ? hours - 12 : hours;
hours = hours + minutes / 60;
/*绘制时针*/
ctx.beginPath();
//画笔宽度
ctx.lineWidth = 5;
//保存画笔设置
ctx.save();
//转换画布的用户坐标系统
ctx.translate(200, 200);
//将当前时间嫁接到画笔上
ctx.rotate(hours * 30 * Math.PI / 180);
//画笔开始位置
ctx.moveTo(0, 10);
//画笔结束位置
ctx.lineTo(0, -100);
//绘画
ctx.stroke();
//将绘图状态置为保存值
ctx.restore();
//将开始位置和结束位置相连
ctx.closePath();
/*绘制分针*/
ctx.beginPath();
ctx.lineWidth = 3;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(minutes * 6 * Math.PI / 180);
ctx.moveTo(0, 10);
ctx.lineTo(0, -123);
ctx.stroke();
ctx.restore();
ctx.closePath();
/*绘制秒针*/
ctx.beginPath();
ctx.lineWidth = 1;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(seconds * 6 * Math.PI / 180);
ctx.moveTo(0, 10);
ctx.lineTo(0, -136);
ctx.stroke();
ctx.restore();
ctx.closePath();
}
//设置成1秒中刷新一次
setInterval(dClock, 1000);
}
</script>运行结果显示：
这时运行的结果会如图，这是每过一秒，新画一根秒针的位置，而原来画笔画的秒针的位置没有清除的原因，这个时候我们就要在每次绘画前清除以前的画布。
<script>
//页面加载完运行
window.onload = function() {
//设置画布为2d
var ctx = document.getElementById("canvas").getContext("2d");
//调用方法
dClock();
function dClock() {
//清除画布（防止覆盖）
ctx.clearRect(0, 0, 400, 400);
//外表盘开始路径
ctx.beginPath();
//线条宽度
ctx.lineWidth = 2;
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 200, 0, 360);
//绘制
ctx.stroke();
//将开始点和结束点相连
ctx.closePath();
//内圈圈
ctx.beginPath();
//开始画圆，x坐标，y坐标，半径，开始角，结束角度
ctx.arc(200, 200, 8, 0, 360);
//绘制
ctx.stroke();
//绘制刻度(时刻度)
//将表盘分成12格
for(var i = 0; i < 12; i++) {
//开始路径
ctx.beginPath();
//保存画笔设置
ctx.save();
//转换画布的用户坐标系统
ctx.translate(200, 200);
//设置旋转角度
ctx.rotate(i * 30 * Math.PI / 180);
//画笔移至到指定位置
ctx.moveTo(0, 175);
//画笔结束位置
ctx.lineTo(0, 200);
//绘制
ctx.stroke();
//将绘图状态置为保存值
ctx.restore();
//将开始位置和结束位置相连
ctx.closePath();
}
//绘制刻度(分刻度) （方法同时刻度）
for(var i = 0; i < 60; i++) {
ctx.beginPath();
ctx.save();
ctx.translate(200, 200);
ctx.rotate(i * 6 * Math.PI / 180);
ctx.moveTo(0, 190);
ctx.lineTo(0, 200);
ctx.stroke();
ctx.restore();
ctx.closePath();
}
//获取系统时间
var nowTime = new Date();
//获取当前小时
var hours = nowTime.getHours();
//获取当前分钟
var minutes = nowTime.getMinutes();
//获取秒
var seconds = nowTime.getSeconds();
//将24小时转为12小时
hours = hours > 12 ? hours - 12 : hours;
hours = hours + minutes / 60;
/*绘制时针*/
ctx.beginPath();
//画笔宽度
ctx.lineWidth = 5;
//保存画笔设置
ctx.save();
//转换画布的用户坐标系统
ctx.translate(200, 200);
//将当前时间嫁接到画笔上
ctx.rotate(hours * 30 * Math.PI / 180);
//画笔开始位置
ctx.moveTo(0, 10);
//画笔结束位置
ctx.lineTo(0, -100);
//绘画
ctx.stroke();
//将绘图状态置为保存值
ctx.restore();
//将开始位置和结束位置相连
ctx.closePath();
/*绘制分针*/
ctx.beginPath();
ctx.lineWidth = 3;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(minutes * 6 * Math.PI / 180);
ctx.moveTo(0, 10);
ctx.lineTo(0, -123);
ctx.stroke();
ctx.restore();
ctx.closePath();
/*绘制秒针*/
ctx.beginPath();
ctx.lineWidth = 1;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(seconds * 6 * Math.PI / 180);
ctx.moveTo(0, 10);
ctx.lineTo(0, -136);
ctx.stroke();
ctx.restore();
ctx.closePath();
}
//设置成1秒中刷新一次
setInterval(dClock, 1000);
}
</script>结果如下：
这个时候时钟已经会动了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
