canvas绘画七巧板

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

等待2062

2017-12-26 11:01

老师 你这案例我对着敲了三遍了 没有七巧板图案出来啊

写回答 关注

2回答

  • 幕布斯1467664
    2017-12-27 18:41:55

    可以显示

  • 幕布斯1467664
    2017-12-27 18:41:16
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="UTF-8">
    <title>seven</title>
    </head>
    
    <body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    var tangram = [
        {p: [{x: 0,y: 0}, {x: 400,y: 0}, {x: 200,y: 200}],color: '#caff67'},
        {p: [{x: 0,y: 0}, {x: 200,y: 200}, {x: 0,y: 400}],color: '#67becf'},
        {p: [{x: 400,y: 0}, {x: 400,y: 200}, {x: 300,y: 300}, {x: 300,y: 100}],color: '#ef3d61'},
        {p: [{x: 300,y: 100}, {x: 300,y: 300}, {x: 200,y: 200}],color: '#f9f51a'},
        {p: [{x: 200,y: 200}, {x: 300,y: 300}, {x: 200,y: 400}, {x: 100,y: 300}],color: '#a594c0'},
        {p: [{x: 100,y: 300}, {x: 200,y: 400}, {x: 0,y: 400}],color: '#fa8ecc'},
        {p: [{x: 400,y: 200}, {x: 400,y: 400}, {x: 200,y: 400}],color: '#f6ca29'}];
        
    
    window.onload = function () {
        var canvas = document.getElementById('canvas');
        
        canvas.width = 400;
        canvas.height = 400;
        
        var ctx = canvas.getContext('2d');
        
        for (var i = 0; i < tangram.length; i++) {
            draw(tangram[i], ctx);
        }
    }
    
    function draw(piece, ctx) {
        ctx.beginPath();
        ctx.moveTo(piece.p[0].x, piece.p[0].y);
        for (var i = 1; i < piece.p.length; i++) {
            ctx.lineTo(piece.p[i].x, piece.p[i].y);
        }
        ctx.closePath();
        
        ctx.fillStyle = piece.color;
        ctx.fill()
    }
    </script>
    </body>
    
    </html>


炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas,彻底释放自己的创造力

96746 学习 · 1000 问题

查看课程

相似问题