canvas绘制时钟

来源：互联网发布：weibull软件编辑：程序博客网时间：2024/05/16 06:25

今天,我们用canvas来制作一个经典时钟 ~ 炫到酷

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title>canvas绘制钟表</title>

<styletype="text/css">

#canvas1{

/*border: 3px solid red;*/

margin:0 auto;

display:block;

}

</style>

</head>

<body>

<canvasid="canvas1" width="600" height="600"></canvas>

</body>

varcanvas = document.getElementById("canvas1");

var context = canvas.getContext("2d");

//通过平移旋转改变画笔的原始坐标位置

varyuanShiWidth = canvas.width * 0.5;//X轴

varyuanShiHeight = canvas.height *0.5;//Y轴

context.translate(yuanShiWidth,yuanShiHeight);

//通过平移旋转改变画笔的X轴和Y轴的方向

context.rotate(-Math.PI/ 2);//逆时针旋转90度

//绘制表盘

function dralDial () {

//外层圆

context.beginPath();

context.arc(0,0,yuanShiWidth,0,Math.PI* 2,false);

context.fillStyle = "deepskyblue";

context.fill();

//内层圆

context.beginPath();

context.arc(0,0,280,0,Math.PI* 2,false);

context.lineWidth = 10;

context.fillStyle = "ivory";

context.fill();

}

//绘制刻度时刻和分刻

functiondrawScale () {

for (var i = 0; i< 60; i++) {

if(i % 5 ==0) {

//绘制时刻整点

context.beginPath();

context.moveTo(238,0);

context.lineTo(270,0);

context.strokeStyle= "black";

context.stroke();

} else{

//绘制分刻非整点

context.beginPath();

context.moveTo(245,0);

context.lineTo(270,0);

context.lineWidth= 5;

context.strokeStyle= "orchid";

context.stroke();

}

//旋转6度

context.rotate(Math.PI/ 180 * 6);

}

//每一度

varyiDu = Math.PI / 180;

//绘制时针分针秒针

function drawTime () {

//获取当前系统时间

vartime = new Date();

var hour = time.getHours();

var minute = time.getMinutes();

var second = time.getSeconds();

//调用save函数，保存当前的绘制状态

context.save();

//需要旋转的角度(坐标轴)

context.rotate(yiDu* 30 * hour + yiDu * minute / 60 * 30);

//绘制时针

context.beginPath();

context.moveTo(-20,0);

context.lineTo(180,0);

context.lineWidth = 13;

context.strokeStyle = "#FFA500"

context.stroke();

//调用restore函数移除自上一次调用save方法以来所添加的任何效果，也就是撤销之前的变化

context.restore();

//绘制分针

context.save();

context.rotate(yiDu * 6 * minute + yiDu * second / 60* 6);

context.beginPath();

context.moveTo(-30,0);

context.lineTo(210,0);

context.lineWidth = 10;

context.strokeStyle = "#FFA500";

context.stroke();

context.restore();

//绘制秒针

context.save();

context.rotate(yiDu * 6 * second);context.beginPath();

context.moveTo(-40,0);

context.lineTo(235,0);

context.lineWidth = 8;

context.strokeStyle = "red";

context.stroke();

context.restore();

//美观-绘制圆

context.beginPath();

context.arc(0,0,15,0,Math.PI* 2,false);

context.fillStyle= "rgba(80,100,200,0.5)";

context.fill()

}

//绘制钟表

functiondrawClock () {

dralDial();

drawScale();

drawTime();

//刷新频率

window.requestAnimationFrame(drawClock);

}

drawClock();

</script>

</html>

0 0