不明白X轴Y轴的数值怎么得来的算的那么准-慕课网

首页课程实战体系课手记专栏慕课教程

不明白X轴Y轴的数值怎么得来的算的那么准

来源：2-2 绘制直线、多边形和七巧板

qq那些年

2017-10-17 16:38

不明白X轴Y轴里面的数值怎么弄

写回答关注

2回答

丹恪梦: 2018-12-30 18:01:17

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

0 0

藏锋入鞘丨3644858

2017-10-18 14:23:44

照着老师那个坐标图看，初始点(x,y)，每个圆占用 2*(r+1)的宽高的正方形，现在求从左往右数第j个，从上往下数第i个圆的圆心：
customX = 2*(r+1)*j + (r+1);// j*每个圆占用的宽度 + 每个圆占用宽度/2
customY = 2*(r+1)*i + (r+1);//同理可证!

0 0