                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ)

canvas繪畫七巧板

老師你這案例我對著敲了三遍了沒有七巧板圖案出來啊

等待2062

2017-12-26

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ) 2-2

關(guān)注問題我要回答

1666

操作

收起

2 回答

幕布斯1467664
2017-12-27

可以顯示

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

幕布斯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>