Question

我正在使用以下代码使用HTML5 canvas元素生成Pythagoras分形树：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery.js" type="text/javascript"></script>
        <style>
            #sketch
            {
            border: 1px solid black; 
            }
        </style>
        <script type="text/javascript">
        window.onload = function()
        {
            var canvas = document.getElementById("sketch");
            var context = canvas.getContext("2d");

            context.fillStyle = "rgba(0, 0, 200, 0.5)";
            context.beginPath();

            context.moveTo(450,550);
            context.lineTo(450,450);
            context.lineTo(550,450);
            context.lineTo(550,550);
            context.fill();

            fractal(context,[450,550],[450,450],[550,450],[550,550],5); 
        };

        function fractal(context,P1,P2,P3,P4,depth)
        {
            context.fillStyle = "rgba(0,0,200,"+(depth/8).toString()+")";
            context.save();
            if(depth < 0)
            {
                return null; 
            }

            /*Find C*/
            C = divide(add(divide(add(P1,P2),2),divide(add(P3,P4),2)),2);

            var V1 = divide(minus(C,P1),length(C,P1));
            var V2 = divide(minus(C,P4),length(C,P4));

            var P6 = add(P2,multiply(V2,length(P1,P2)/Math.sqrt(2)));
            var P7 = add(P6,multiply(V1,length(P1,P2)/Math.sqrt(2)));
            var P5 = add(P2,multiply(V1,length(P1,P2)/Math.sqrt(2)));
            var P9 = add(P3,multiply(V1,length(P1,P2)/Math.sqrt(2)));
            var P8 = add(P9,multiply(V2,length(P1,P2)/Math.sqrt(2)));

            context.moveTo(P2[0],P2[1]);
            context.lineTo(P6[0],P6[1]);
            context.lineTo(P7[0],P7[1]);
            context.lineTo(P5[0],P5[1]);
            context.fill();

            context.moveTo(P5[0],P5[1]);
            context.lineTo(P8[0],P8[1]);
            context.lineTo(P9[0],P9[1]);
            context.lineTo(P3[0],P3[1]);
            context.fill();

            fractal(context,P2,P6,P7,P5,depth-1);
            fractal(context,P5,P8,P9,P3,depth-1);
        }

        function multiply(v, num){
            return [v[0]*num, v[1]*num];
        }

        function divide(v, num){
            return [v[0]/num, v[1]/num];
        }

        function add(a, b){
            return [a[0]+b[0], a[1]+b[1]];
        }

        function minus(a, b){
            return [a[0]-b[0], a[1]-b[1]];
        }

        function length(a, b){
            return Math.sqrt(Math.pow(a[0] - b[0],2) + 
                Math.pow(a[1] - b[1],2));
        }
        </script>
        <title>Square</title>
    </head>
    <body>
        <canvas id="sketch" height="1000" width="1000"></canvas>
    </body>

</html>

我每次迭代都会改变不透明度值。但是我没有在结果中看到它。

如何解决这个问题？

Answer 1

你真的很接近正确的解决方案。看这里： http://jsfiddle.net/mbessey/Wj4VH/

这里的关键区别是在为每个方块启动moveTo（）和lineTo（）之前调用beginPath（）。所以，而不是：

context.moveTo(P2[0],P2[1]);
context.lineTo(P6[0],P6[1]);
context.lineTo(P7[0],P7[1]);
context.lineTo(P5[0],P5[1]);
context.fill();

context.moveTo(P5[0],P5[1]);
context.lineTo(P8[0],P8[1]);
context.lineTo(P9[0],P9[1]);
context.lineTo(P3[0],P3[1]);
context.fill();

你想：

context.beginPath()
context.moveTo(P2[0],P2[1]);
context.lineTo(P6[0],P6[1]);
context.lineTo(P7[0],P7[1]);
context.lineTo(P5[0],P5[1]);
context.fill();

context.beginPath()
context.moveTo(P5[0],P5[1]);
context.lineTo(P8[0],P8[1]);
context.lineTo(P9[0],P9[1]);
context.lineTo(P3[0],P3[1]);
context.fill();

你所做的主要是创建一条包含所有方块的大路径，然后用相同的颜色填充它们。

Answer 2

Check This 我更改了画布本身的不透明度，使其更容易实现目标。

添加rgba(0, 0, 200, 1)和

  #sketch
    {
    border: 1px solid black;
    opacity: 0.3;
    }

足以满足您的需求

绘制分形时，迭代地更改画布中的fillStyle颜色

2 个答案: