canvas绘制闹钟-方法1 原
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas</title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/test.css">
<style>
</style>
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<canvas id="canvas" width="400" height="400" style="background:#f2f2f2"></canvas>
<script>
function clock() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 400, 400)
var now = new Date()
ctx.save(); //第一个save
//基础设置
ctx.translate(200, 200)
//逆时针旋转画布90度，起点为上面的顶部
ctx.rotate(-Math.PI / 2);
ctx.lineWidth = 6
ctx.lineCap = "round"
//小时刻度
ctx.save();
ctx.strokeStyle = "#666"
ctx.lineWidth = 4
for (var i = 0; i < 3; i++) {
ctx.beginPath();
ctx.moveTo(110, 0);
ctx.lineTo(120, 0);
ctx.stroke()
ctx.rotate(Math.PI / 6)
}
ctx.restore()
ctx.save();
//分钟刻度
ctx.strokeStyle = "#aaaaaa"
ctx.lineWidth = 3;
for (i = 0; i < 60; i++) {
if (i % 5 != 0) {
ctx.beginPath()
ctx.moveTo(112, 0)
ctx.lineTo(115, 0)
ctx.stroke()
}
//就算不画线也要旋转度数，所以不放在if里面
ctx.rotate(Math.PI / 30)
}
ctx.restore()
var hr = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
hr = hr >= 12 ? hr - 12 : hr
//时针
ctx.save();
//换算成时针的角度，小时是一个圆周分成12份，1小时60分钟，1分钟60秒，
ctx.rotate(hr * (2 * Math.PI / 12) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
ctx.strokeStyle = "#444"
ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(-20, 0);
ctx.lineTo(80, 0)
ctx.stroke();
ctx.restore()
// 分针
ctx.save();
//换算成分针的角度，分针是一个圆周分成60份，一分钟是60秒
ctx.rotate((2 * Math.PI / 60) * min + (2 * Math.PI / 3600) * sec)
ctx.strokeStyle = "#444"
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-28, 0);
ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore()
//秒针
ctx.save();
//秒针的弧度
ctx.rotate(sec * 2 * Math.PI / 60)
ctx.lineWidth = 6;
ctx.strokeStyle = "#f2751a";
ctx.beginPath();
ctx.moveTo(-30, 0)
ctx.lineTo(86, 0)
ctx.stroke()
ctx.beginPath()
ctx.arc(96, 0, 6, 0, Math.PI * 2, true)
ctx.stroke()
ctx.fillStyle = "#a38c65";
ctx.beginPath()
ctx.arc(0, 0, 10, 0, Math.PI * 2, true)
ctx.fill();
ctx.restore();
//外面的圆环
ctx.beginPath();
ctx.lineWidth = 8;
ctx.strokeStyle = "#1b9eb6";
ctx.arc(0, 0, 122, 0, Math.PI * 2, true)
ctx.stroke()
ctx.restore();//返回到第一个save*/
window.requestAnimationFrame(clock);
}
clock();
//window.requestAnimationFrame(clock) 也可
</script>
</body>
</html>总结：角度旋转默认是按右边水平方向，向下旋转，现在逆时针把画布旋转90度，使旋转的起始位置在正上方，画布旋转后x轴与y轴也随着画布旋转而旋转； 注意画好图之后再旋转画布，图上面画的图形不会旋转；
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/11/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读