在繪制分形時迭代地更改畫布中的fillStyle顏色

Question

我正在使用以下代碼使用HTML5 canvas元素生成畢達哥拉斯分形樹：

<!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

選中此選項，我已更改了畫布本身的不透明度，從而使其易於實現。

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

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

足以滿足您的需求

在繪制分形時迭代地更改畫布中的fillStyle顏色

問題描述

2 個解決方案

解決方案1
1 已采納 2013-01-23 06:58:47

解決方案2
0 2013-01-23 06:34:20

在繪制分形時迭代地更改畫布中的fillStyle顏色

問題描述

2 個解決方案

解決方案1 1 已采納 2013-01-23 06:58:47

解決方案2 0 2013-01-23 06:34:20

解決方案1
1 已采納 2013-01-23 06:58:47

解決方案2
0 2013-01-23 06:34:20