不明白X轴Y轴里面的数值怎么弄
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>七巧板</title>
<style type="text/css">
#canvas {
border: 1px solid #ccc;
display: block;
margin: auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
var tangram = [
{p: [{x: 0, y: 0}, {x: 400, y: 0}, {x: 200, y: 200}], color: "#ff0f09"},
{p: [{x: 0, y: 0}, {x: 0, y: 400}, {x: 200, y: 200}], color: "#feff0a"},
{p: [{x: 0, y: 400}, {x: 200, y: 400}, {x: 100, y: 300}], color: "#ff09f7"},
{p: [{x: 100, y: 300}, {x: 200, y: 400}, {x: 300, y: 300},{x: 200, y: 200}], color: "#ffdc52"},
{p: [{x:200,y:400}, {x:400,y:400}, {x:400,y:200}], color: "#0608ff"},
{p: [{x:200,y:200}, {x:300,y:300}, {x:300,y:100}], color: "#30ff10"},
{p: [{x:300,y:300}, {x:300,y:100}, {x:400,y:0}, {x:400,y:200}], color: "#ffa41a"},
];
var canvas = document.getElementById("canvas"); // 获取canvas
var context = canvas.getContext("2d"); // 获取2d绘图环境
for (var i = 0; i < tangram.length; i++) {
draw(tangram[i], context);
}
function draw(piece, context) {
context.beginPath();
context.closePath();
context.moveTo(piece.p[0].x, piece.p[0].y);
for (var i = 0; i < piece.p.length; i++) {
context.lineTo(piece.p[i].x, piece.p[i].y);
}
context.fillStyle = piece.color;
context.fill();
}
</script>
</body>
</html>照着老师那个坐标图看，初始点(x,y)，每个圆占用 2*(r+1)的宽高的正方形，现在求从左往右数第j个，从上往下数第i个圆的圆心：
customX = 2*(r+1)*j + (r+1);// j*每个圆占用的宽度 + 每个圆占用宽度/2
customY = 2*(r+1)*i + (r+1);//同理可证!