html5画布操作的简单学习-简单时针
一.什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
二.本次学习html5的canvas的简单函数
getContext(style)-----------获取canvas画图操作对象,style为样式参数,二维空间2d,三维空间3d
moveTo(x,y)-----------------移动操作
lineTo(x,y)-----------------画直线
translate(x,y)-------------设置坐标轴的原点
rotate(arc)----------------坐标的旋转,arc为弧度,弧度=角度*π/180;
store()------------------------展现画布
clearRect(x1,y1,x2,y2)-----清除长方形的画布,x1,y1为长方形的起点,x2,y2为长方形的起点对角线的点
三、画时钟步骤
1.新建文件clock.html,文件内容如下,以后步骤的代码都现在script标签中填写
<!doctype html>
<html>
<head></head>
<body>
<center>
<canvas id="clock" width="500" height="500">浏览器不支持画布操作</canvas>
</center>
<script>
</script>
</body>
</html>
2.获取画布操作二维空间的操作
var clock=document.getElementById("clock");
var ctx=clock.getContext("2d");
3.画时钟边界--表盘
定义目前画时钟的时间
时钟时间:3点30分45秒
var hour=3;
var min=30;
var sec=45;
//画表盘
ctx.lineWidth=10;
ctx.strokeStyle="blue";
ctx.beginPath();
ctx.arc(250,250,200,0,360,false);
ctx.closePath();
ctx.stroke();
4.画时钟的时刻度
for(var i=0;i<12;i++){
ctx.save();
ctx.lineWidth=7;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(i*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-190);
ctx.lineTo(0,-170);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
5画时钟的分或秒的刻度
//画分钟刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.lineWidth=5;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-190);
ctx.lineTo(0,-180)
ctx.closePath();
ctx.stroke();
ctx.restore();
}
6、画时针
//画时针
ctx.save();
ctx.lineWidth=10;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(hour*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-120);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();
7、画分针
//画分针
ctx.save();
ctx.lineWidth=7;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(min*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-150);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();
8.画秒针
//画秒针
ctx.save();
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.translate(250,250);
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-160);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
ctx.restore();
好了经过上述一个固定时间的时钟已经画好了,但是时间从来都不会停止的,所以还是不符合业务吧,那现在就通过setInterval循环运行函数来实现走动的时钟
setinterval('代码','间隔时间(单位毫秒)');将上述 步骤的代码用函数drawClock封装起来,每秒钟实现一次setInterval(drawClock,1000);
时间的变量的赋值
var nowDate=new Date();
var hour=nowDate.getHours();
var min=nowDate.getMinutes();
var sec=nowDate.getSeconds();
hour=hour>12?hour-12:hour;
运行起来,秒针会动了,但是有痕迹在,需要用clearRect清除画布后,在全部重新画。
整体代码如下
<!doctype html>
<html>
<head></head>
<body>
<center>
<canvas id="clock" width="500" height="500">浏览器不支持画布操作</canvas>
</center>
<script>
var clock=document.getElementById("clock");
var ctx=clock.getContext("2d");
function drawClock(){
//清屏
ctx.clearRect(0,0,500,500);
var nowDate=new Date();
var hour=nowDate.getHours();
var min=nowDate.getMinutes();
var sec=nowDate.getSeconds();
hour=hour>12?hour-12:hour;
//画表盘
ctx.lineWidth=10;
ctx.strokeStyle="blue";
ctx.beginPath();
ctx.arc(250,250,200,0,360,false);
ctx.closePath();
ctx.stroke();
//画时针刻度
for(var i=0;i<12;i++){
ctx.save();
ctx.lineWidth=7;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(i*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-190);
ctx.lineTo(0,-170);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
//画分钟刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.lineWidth=5;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-190);
ctx.lineTo(0,-180)
ctx.closePath();
ctx.stroke();
ctx.restore();
}
//画时针
ctx.save();
ctx.lineWidth=10;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(hour*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-120);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();
//画分针
ctx.save();
ctx.lineWidth=7;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(min*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-150);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();
//画秒针
ctx.save();
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.translate(250,250);
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-160);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>