等待2062
2017-12-26 11:01
老师 你这案例我对着敲了三遍了 没有七巧板图案出来啊
可以显示
<!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绘图与动画基础
96746 学习 · 1000 问题
相似问题