<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas{
border:1px solid red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 移动坐标轴,到圆心位置,将坐标轴移到画布的正中间
context.translate(200,200);
context.beginPath();
context.arc(0,0,200,0,Math.PI*2);
// 刻度
context.moveTo(180,0);
context.lineTo(200,0);
// 保存一下坐标轴,样式设置
context.save();
for(var i=0;i<11;i++){
context.rotate(Math.PI/6);
context.moveTo(180,0);
context.lineTo(200,0);
}
context.closePath();
// 复位
context.restore();
context.moveTo(5,0);
context.arc(0,0,5,0,Math.PI*2);
context.moveTo(5,0);
context.lineTo(100,0);
context.moveTo(0,-5);
context.lineTo(0,-130);
context.moveTo(0,5);
context.lineTo(0,150);
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>