                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

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

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

qq那些年

2017-10-17

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-2

关注问题我要回答

1189

操作

收起

2 回答

丹恪梦
2018-12-30

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