<!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>