Chức năng: f5 hình cây sẽ thay đổi
 
Javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

function drawBranches(startX, startY, trunkWidth, level){
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    if (level < 12) {
        var changeX = 100 / (level + 1);
        var changeY = 200 / (level + 1);
 
        var topRightX = startX + Math.random() * changeX;
        var topRightY = startY - Math.random() * changeY;
 
        var topLeftX = startX - Math.random() * changeX;
        var topLeftY = startY - Math.random() * changeY;
 
        // draw right branch
        context.beginPath();
        context.moveTo(startX + trunkWidth / 4, startY);
        context.quadraticCurveTo(startX + trunkWidth / 4, startY - trunkWidth, topRightX, topRightY);
        context.lineWidth = trunkWidth;
        context.lineCap = "round";
        context.stroke();
 
        // draw left branch
        context.beginPath();
        context.moveTo(startX - trunkWidth / 4, startY);
        context.quadraticCurveTo(startX - trunkWidth / 4, startY -
        trunkWidth, topLeftX, topLeftY);
        context.lineWidth = trunkWidth;
        context.lineCap = "round";
        context.stroke();
 
        drawBranches(topRightX, topRightY, trunkWidth * 0.7, level + 1);
        drawBranches(topLeftX, topLeftY, trunkWidth * 0.7, level + 1);
    }
}
 
window.onload = function(){
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    drawBranches(canvas.width / 2, canvas.height, 50, 0);
};