<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
</head>
<style type="text/css">
div{text-align: center;margin-top: 250px: }
clock{border:1px solid #ccc;}
</style>
<body>
<div>
<canvas id="clock" height="200px" width="200px"></canvas>
</div>
<script type="text/javascript" >
var dom = document.getElementById('clock')
var ctx = dom.getContext('2d');
var height = ctx.canvas.height;
var width = ctx.canvas.width;
var r = width/2;
function draw(){
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.arc(0,0,r,0,2*Math.PI,false);
ctx.stroke();
}
draw();
</script>
</body>
</html>
将ctx.arc(0,0,r,0,2*Math.PI,false)改成ctx.arc(0,0, r - 5,0,2*Math.PI,false)就可以完整显示圆