H5 canvas 制作简易时钟
程序员文章站
2022-05-28 09:05:23
...
学习了canvas，写下自己的心得体会。
1.在css中设置canvas的宽和高，发现里面的矩形和其他元素都是放大的。然后自己得出结论：
1.canvas的宽高属性要写在 标签内
canvas的默认宽高为300*150，如果宽高在css中设置相对默认值的x倍，你所画的元素也会相对你设置的扩大x倍。亲自实验发现真是这样。但是这样画布中的元素宽高就不好控制了。第二天发现把 宽高以属性值的方式写到标签中时，元素和你设置的一样的，并不会随着宽高与默认值的比例发生变化。所以canvas的宽高属性要写在 标签内。
2.rotate（degree）角度要写成 deg*Math.PI/180
3.制作简易时钟。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
</head>
<body>
<canvas id="clock" width='500px' height="500px"></canvas>
<script type="text/javascript">
var domClock = document.getElementById("clock");
var clock = domClock.getContext("2d");
setInterval(drawClock, 1000);
/*时钟*/
function drawClock() {
clock.clearRect(0,0,500,500);
/*外圈*/
clock.beginPath();
clock.strokeStyle = "blue";
clock.lineWidth = 10;
clock.arc(250, 250, 200, 0, Math.PI*2, true);
clock.stroke();
clock.font = "18px arial";
clock.fillText(timeString(), 170, 160);
clock.closePath();
/*时针刻度*/
for (var i = 0; i < 12; i++) {
clock.save();
clock.translate(250, 250);
clock.lineWidth = 3;
clock.strokeStyle = "red";
clock.rotate(i * Math.PI/6);
clock.beginPath();
clock.moveTo(0, -180);
clock.lineTo(0, -195);
clock.stroke();
clock.closePath();
clock.restore();
}
/*数字绘制*/
for (var i = 0; i < 12; i++) {
clock.save();
clock.translate(250, 250);
var x = Math.sin(i * Math.PI/6)*160 - 4;
var y = -Math.cos(i * Math.PI/6)*160;
clock.textAlign = 'center';
clock.textBaseline = 'middle';
clock.fillText(i, x, y);
clock.closePath();
clock.restore();
}
/*分针刻度*/
for(var i= 0; i< 60; i++) {
if (i % 5) {
clock.save();
clock.lineWidth = 2;
clock.strokeStyle = "#000";
clock.translate(250, 250);
clock.beginPath();
clock.rotate(i * Math.PI/30);
clock.moveTo(0, -185);
clock.lineTo(0, -195);
clock.stroke();
clock.closePath();
clock.restore();
}
}
var time = new Date();
var hour = time.getHours() > 11? time.getHours()-12: time.getHours();
var minutes = time.getMinutes();
var second = time.getSeconds();
/*时针*/
clock.save();
clock.translate(250, 250);
clock.beginPath();
clock.strokeStyle = "#000";
clock.lineWidth = 6;
clock.rotate((hour *30 + minutes/2) *Math.PI/180);
clock.moveTo(0 , 20);
clock.lineTo(0, -80);
clock.stroke();
clock.closePath();
clock.restore();
/*分针*/
clock.save();
clock.translate(250, 250);
clock.lineWidth = 3;
clock.strokeStyle = "#000";
clock.beginPath();
clock.rotate(minutes*6*Math.PI/180);
clock.moveTo(0, 30);
clock.lineTo(0, -110);
clock.stroke();
clock.closePath();
clock.restore();
/*秒针*/
clock.save();
clock.translate(250, 250);
clock.lineWidth = 2;
clock.strokeStyle = "#000";
clock.arc(0, 0 , 8, 0, Math.PI*2);
clock.fillStyle = "red";
clock.fill();
clock.beginPath();
clock.rotate(second* Math.PI/30);
clock.moveTo(0, 20);
clock.lineTo(0, -130);
clock.moveTo(-3, -125);
clock.lineTo(0, -130);
clock.moveTo(3, -125);
clock.lineTo(0, -130);
clock.stroke();
clock.closePath();
clock.restore();
}
function timeString() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var day = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
}
</script>
</body>
</html>
上一篇： JS之DOM