<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>时钟</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="background-color: #eee"> 您的浏览器不支持canvas </canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 1.画表盘
ctx.lineWidth = 10;
ctx.strokeStyle = 'orange';
ctx.beginPath();
ctx.arc(250, 250, 200, 0, 360, false);
ctx.stroke();
ctx.closePath();
// 2.画小时刻度
for(var i = 0; i < 12; i++) {
ctx.save();
ctx.lineWidth = 10;
ctx.strokeStyle = '#000';
ctx.translate(250, 250);
ctx.rotate(i * 30 / 180 * Math.PI);
ctx.beginPath();
ctx.moveTo(0, 170);
ctx.lineTo(0, 190);
// ctx.restore();
ctx.stroke();
ctx.closePath();
ctx.restore();
}
// 3.画分钟刻度
for(var i = 0; i < 60; i++) {
ctx.save();
ctx.lineWidth = 5;
ctx.strokeStyle = '#000';
ctx.translate(250, 250);
ctx.rotate(i * 6 / 180 * Math.PI);
ctx.beginPath();
ctx.moveTo(0, 170);
ctx.lineTo(0, 190);
// ctx.restore();
ctx.stroke();
ctx.closePath();
ctx.restore();
}
</script>
</body>
</html>上述运行结果：
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
