二分搜索算法
<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>