您的位置：首页 > Web前端 > HTML5

使用html5 canvas 随机生成无向图

2016-10-18 23:21 351 查看

<!DOCTYPE HTML>
<html>
<body>
<script>
function random_int(min, max){
var ret = Math.round(Math.random() * (max - min + 1)) + min - 1;
return ret < min ? min : ret;
}
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
function draw_circle(context, x, y, r)
{
cxt.beginPath();
cxt.arc(x, y, r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
function draw_line(context, begin_x, begin_y, end_x, end_y)
{
cxt.beginPath();
cxt.moveTo(begin_x, begin_y);
cxt.lineTo(end_x, end_y);
cxt.closePath();
cxt.stroke();
}
function mycos(angle) { return Math.cos(angle * Math.PI / 180); }
function mysin(angle) { return Math.sin(angle * Math.PI / 180); }
function get_p(md_x, md_y, len, pos, xy)
{
switch (pos)
{
case 'up':
return xy == 'x'
? md_x
: md_y - len;
case 'up_left':
return xy == 'x'
? md_x - mycos(18) * len
: md_y - mysin(18) * len;
case 'up_right':
return xy == 'x'
? md_x + mycos(18) * len
: md_y - mysin(18) * len;
case 'down_left':
return xy == 'x'
? md_x - mycos(54) * len
: md_y + mysin(54) * len;
case 'down_right':
return xy == 'x'
? md_x + mycos(54) * len
: md_y + mysin(54) * len;
}
}
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#000088";

var md_x = 100;
var md_y = 50;
var len = 45;
draw_circle(cxt, md_x, md_y, 3);
var x1 = get_p(md_x, md_y, len, 'up', 'x');
var y1 = get_p(md_x, md_y, len, 'up', 'y');
var x2 = get_p(md_x, md_y, len, 'up_left', 'x');
var y2 = get_p(md_x, md_y, len, 'up_left', 'y');
var x3 = get_p(md_x, md_y, len, 'up_right', 'x');
var y3 = get_p(md_x, md_y, len, 'up_right', 'y');
var x4 = get_p(md_x, md_y, len, 'down_left', 'x');
var y4 = get_p(md_x, md_y, len, 'down_left', 'y');
var x5 = get_p(md_x, md_y, len, 'down_right', 'x');
var y5 = get_p(md_x, md_y, len, 'down_right', 'y');
draw_circle(cxt, x1, y1, 3);
draw_circle(cxt, x2, y2, 3);
draw_circle(cxt, x3, y3, 3);
draw_circle(cxt, x4, y4, 3);
draw_circle(cxt, x5, y5, 3);
var points = [
{x: md_x, y: md_y},
{x: x1, y: y1},
{x: x2, y: y2},
{x: x3, y: y3},
{x: x4, y: y4},
{x: x5, y: y5}
];
for (var i = 0; i != 10; ++i)
{
var index1 = random_int(0, 5);
var index2 = random_int(0, 5);
draw_line(cxt, points[index1].x, points[index1].y, points[index2].x, points[index2].y);
}
</script>

</body>
</html>

为了测试路由算法，也就是最短路径，用html5写了个随机生成无向图的程序。

为了看起来不错综复杂，无向图只有6个点，形状是正五边形，中间一个点加外面五个点。

直接在w3school上的例子改的，先封装了画圆的函数draw_circle；

然后写了get_p函数，根据中间点计算外面5个点的坐标；

再然后封装了画线的函数draw_line.

接下来是random_int函数，再用json把点的坐标存入points, 然后调用.

运行效果https://jsfiddle.net/otu6bgyu/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航