1 | <canvas id= "treeCanvas" width= "800" height= "600" ></canvas> |
1 2 | var canvas = document.getElementById( 'treeCanvas' ); var ctx = canvas.getContext( '2d' ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function drawTree(ctx, x, y, length, angle) { // 绘制当前节点 ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + length * Math.cos(angle), y - length * Math.sin(angle)); ctx.stroke(); // 绘制左子树 drawTree(ctx, x + length * Math.cos(angle), y - length * Math.sin(angle), length * 0.8, angle - 0.3); // 绘制右子树 drawTree(ctx, x + length * Math.cos(angle), y - length * Math.sin(angle), length * 0.8, angle + 0.3); } drawTree(ctx, 400, 500, 100, -Math.PI / 2); |
本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com