<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #eee;
}
canvas {
display: block;
/* margin: 80px auto; */
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var step = 30;
//一个方块的大小是30*30px
/* 网格 */
ctx.beginPath();
for (var i = 1, iLen = canvasWidth / step; i < iLen; i++) {
//画的是y轴
ctx.moveTo(1 * step, 0);
ctx.lineTo(1 * step, canvasHeight);
//画的是x轴
ctx.moveTo(0, 1 * step);
ctx.lineTo(canvasHeight, 1 * step);
}
ctx.strokeStyle = '#efefef';
ctx.stroke();
/* 弓形 */
// ctx.beginPath();
// ctx.arc(300, 300, 150, 0, Math.PI * 0.6, false);
// ctx.closePath();
// ctx.strokeStyle = '#f40';
// ctx.stroke();
/* 扇形 */
// ctx.beginPath();
// ctx.moveTo(300, 300);
// /* 起始点移到圆心 */
// ctx.arc(300, 300, 150, Math.PI * -0.3, Math.PI, true);
// // ctx.closePath();
// ctx.strokeStyle = '#00f';
// ctx.stroke();
</script>
</body>
</html>