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

canvas绘画七巧板

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

等待2062

2017-12-26

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

关注问题我要回答

1575

操作

收起

2 回答

幕布斯1467664
2017-12-27

可以显示

0 回复有任何疑惑可以回复我~

收起回答

幕布斯1467664
2017-12-27

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