HTML5画布的实时画图

二分搜索算法

<canvas id="myCanvas" width="1000" height="550">
          很抱歉，您的浏览器不支持html5画布功能，所以不能正常显示。亲，还是请换个浏览器试试吧。
    </canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var pen = c.getContext("2d");
        var sx=500,sy=275;
        pen.strokeStyle = "Black";
        pen.lineWidth = 2;
        //绘制x轴
        pen.moveTo(sx - 400, sy); pen.lineTo(sx + 400, sy); //x轴
        pen.moveTo(sx + 400, sy); pen.lineTo(sx + 400 - 10, sy - 10);//x轴小箭头
        pen.moveTo(sx + 400, sy); pen.lineTo(sx + 400 - 10, sy + 10);//x轴小箭头
        //绘制y轴
        pen.moveTo(sx, sy - 250); pen.lineTo(sx, sy + 250); //y轴
        pen.moveTo(sx, sy - 250); pen.lineTo(sx - 10, sy - 250 + 10); //y轴小箭头
        pen.moveTo(sx, sy - 250); pen.lineTo(sx + 10, sy - 250 + 10); //y轴小箭头
        pen.stroke();
        //绘制y=x
        pen.beginPath();
        pen.strokeStyle = "Yellow";
        pen.moveTo(sx - 250, sy + 250); pen.lineTo(sx + 250, sy - 250);
        pen.stroke();
        //绘制y=2sinx
        pen.beginPath();
        pen.strokeStyle = "Green";
        pen.moveTo(sx-Math.PI * 100, sy);
        for(var i=-100;i<=100;i++){
            pen.lineTo(sx + Math.PI * i, sy - Math.sin(i / 100.0 * Math.PI) * 200);
        }
        pen.stroke();

        //绘制二分搜索过程
        pen.strokeStyle = "Red";
        var l1 = 0, r1 = Math.PI;
        function f1()
        {
            if (r1 - l1 > 1e-3)
            {
                var mid = (l1 + r1) / 2.0;
                pen.beginPath();
                pen.moveTo(sx + mid * 100, sy - Math.sin(mid) * 200); pen.lineTo(sx + mid * 100, sy);
                pen.stroke();
                if (mid > 2.0 * Math.sin(mid)) r1 = mid;
                else l1 = mid;
                setTimeout("f1()", 1000);
            }
            else
            {
                var ans = (l1 + r1) / 2.0;
                pen.font = "italic 14px serif";
                pen.fillText(ans.toPrecision(5), sx + ans * 100 - 15, sy + 15);
            }
        }
        var l2 = -Math.PI, r2 =0;
        function f2()
        {
            if (r2 - l2 > 1e-3)
            {
                var mid = (l2 + r2) / 2.0;
                pen.beginPath();
                pen.moveTo(sx + mid * 100, sy - Math.sin(mid) * 200); pen.lineTo(sx + mid * 100, sy);
                pen.stroke();
                if (mid > 2.0 * Math.sin(mid)) r2 = mid;
                else l2 = mid;
                setTimeout("f2()", 1000);
            }
            else
            {
                var ans = (l2 + r2) / 2.0;
                pen.font = "italic 14px serif";
                pen.fillText(ans.toPrecision(5), sx + ans * 100 - 15, sy - 10);
            }
        }
        setTimeout("f1()", 1000);
        setTimeout("f2()", 1000);
    </script>

黄金分割搜索算法

    <canvas id="myCanvas" width="1000" height="550">
          很抱歉，您的浏览器不支持html5画布功能，所以不能正常显示。亲，还是请换个浏览器试试吧。
    </canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var pen = c.getContext("2d");
        var sx = 500, sy = 275;
        pen.strokeStyle = "Black";
        pen.lineWidth = 2;
        //绘制x轴
        pen.moveTo(sx - 400, sy); pen.lineTo(sx + 400, sy); //x轴
        pen.moveTo(sx + 400, sy); pen.lineTo(sx + 400 - 10, sy - 10);//x轴小箭头
        pen.moveTo(sx + 400, sy); pen.lineTo(sx + 400 - 10, sy + 10);//x轴小箭头
        //绘制y轴
        pen.moveTo(sx, sy - 250); pen.lineTo(sx, sy + 250); //y轴
        pen.moveTo(sx, sy - 250); pen.lineTo(sx - 10, sy - 250 + 10); //y轴小箭头
        pen.moveTo(sx, sy - 250); pen.lineTo(sx + 10, sy - 250 + 10); //y轴小箭头
        pen.stroke();
        //绘制y=cosx  x[-pi/2,pi/2]
        pen.beginPath();
        pen.strokeStyle = "Green";
        pen.moveTo(sx - Math.PI * 50, sy);
        for (var i = -50; i <=50; i++) {
            pen.lineTo(sx + Math.PI * i, sy - Math.cos(i / 100.0 * Math.PI) * 100);
        }
        pen.stroke();

        //绘制黄金分割搜索过程
        pen.strokeStyle = "Red";
        var l = -Math.PI / 2.0, r = Math.PI / 2.0, gold = (Math.sqrt(5) - 1.0) / 2.0;
        var x1 = l + (r - l) * (1.0 - gold);
        var x2 = l + (r - l) * gold;
        var f1 = Math.cos(x1);
        var f2 = Math.cos(x2);
        function f() {
            pen.beginPath();
            pen.moveTo(sx + l * 100, sy - Math.cos(l) * 100); pen.lineTo(sx + l * 100, sy);
            pen.moveTo(sx + r * 100, sy - Math.cos(r) * 100); pen.lineTo(sx + r * 100, sy);
            pen.stroke();
            if (r - l > 1e-5) {
                if (f2 > f1) {
                    l = x1;
                    x1 = x2;
                    f1 = f2;
                    x2 = l + (r - l) * gold;
                    f2 = Math.cos(x2);
                }
                else {
                    r = x2;
                    x2 = x1;
                    f2 = f1;
                    x1 = l + (r - l) * (1 - gold);
                    f1 = Math.cos(x1);
                }
                if (r - l > 1e-2) setTimeout("f()", 1000);
                else setTimeout("f()", 100);
            } else {
                var ans = (l + r) / 2.0;
                pen.font = "italic 14px serif";
                pen.fillText(ans, sx - 20, sy + 15);
            }
        }
        setTimeout("f()", 1000);
    </script>