Arrays 基于for-loop的可伸缩多边形网格
我想创建一个交互式数字画布,它将在网格中生成一系列近似正方形的多边形。下面的JSFIDLE显示了上述多边形的2x2网格系统。如果检查代码或刷新页面,您将看到中心顶点是4个相邻多边形共享的半随机生成点 我想将这个网格扩展到16x16附近,每个内部顶点都是半随机生成的,但在其当前状态下,完成的代码将是低效的、不灵活的和不可伸缩的。我知道有一个相对简单的解决方案,但考虑到我在for循环和数组方面的经验不足,它目前超出了我的范围。非常感谢您的帮助 HTML: CSS:Arrays 基于for-loop的可伸缩多边形网格,arrays,html,canvas,for-loop,polygon,Arrays,Html,Canvas,For Loop,Polygon,我想创建一个交互式数字画布,它将在网格中生成一系列近似正方形的多边形。下面的JSFIDLE显示了上述多边形的2x2网格系统。如果检查代码或刷新页面,您将看到中心顶点是4个相邻多边形共享的半随机生成点 我想将这个网格扩展到16x16附近,每个内部顶点都是半随机生成的,但在其当前状态下,完成的代码将是低效的、不灵活的和不可伸缩的。我知道有一个相对简单的解决方案,但考虑到我在for循环和数组方面的经验不足,它目前超出了我的范围。非常感谢您的帮助 HTML: CSS: 如何使用略微随机偏移的交点绘制栅
如何使用略微随机偏移的交点绘制栅格 将栅格上的每个交点视为圆的中心点 然后可以使用随机半径和随机角度计算从该中心点的偏移 这将随机偏移每个相交点 下面是一个如何计算网格点的示例,其中0-2.5像素的“抖动”偏离了“正常”位置:
// make each grid cell's side 20px
// (you can alter this to fit your needs)
var sideLength=20;
// allow the point to wobble up to 2.5 pixels from its "usual" position
var radius=2.5*Math.random();
// allow that point to wobble at a random angle around its "usual" position
var radianAngle=2*Math.PI*Math.random();
// do the calculation of the new wobbled intersection point
// the x & y are the cell's horizontal(x) and vertical(y) position on the grid
var cx=x*sideLength+radius*Math.cos(radianAngle);
var cy=y*sideLength+radius*Math.sin(radianAngle);
下面是示例代码和提琴:
正文{背景色:象牙;}
#画布{边框:1px纯红;}
$(函数(){
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
//声明数组
var点=新阵列(17);
对于(var i=0;i
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var randomX = Math.floor((Math.random()-0.5)*30);
var randomY = Math.floor((Math.random()-0.5)*30);
var x1 = canvas.width/2 + randomX;
var x2 = canvas.width;
var y1 = canvas.height/2 + randomY;
var y2 = canvas.height;
//background
context.beginPath();
context.rect(0,0,canvas.height,canvas.width);
context.fillStyle = '#A3DCEE';
context.fill();
//top left polygon
context.beginPath();
context.lineTo(0,0); //top left quadrant
context.lineTo(canvas.width/2,0); //top right quadrant
context.lineTo(x1, y1); //bottom right quadrant
context.lineTo(0, canvas.width/2); //bottom left quadrant
context.closePath();
context.fillStyle = '#ABE2EF';
context.fill();
//top right polygon
context.beginPath();
context.lineTo(x2/2,0); //top left quadrant
context.lineTo(x2,0); //top right quadrant
context.lineTo(x2, y2/2); //bottom right quadrant
context.lineTo(x1, y1); //bottom left quadrant
context.closePath();
context.fillStyle = '#A3DCEE';
context.fill();
//bottom left polygon
context.beginPath();
context.lineTo(0,y2/2); //top left quadrant
context.lineTo(x1,y1); //top right quadrant
context.lineTo(x2/2, y2); //bottom right quadrant
context.lineTo(0, y2); //bottom left quadrant
context.closePath();
context.fillStyle = '#8CD6F6';
context.fill();
//bottom right polygon
context.beginPath();
context.lineTo(x1,y1); //top left quadrant
context.lineTo(x2,y2/2); //top right quadrant
context.lineTo(x2, y2); //bottom right quadrant
context.lineTo(x2/2, y2); //bottom left quadrant
context.closePath();
context.fillStyle = '#85D2ED';
context.fill();
html, body {
background-color: #fff;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
canvas {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
// make each grid cell's side 20px
// (you can alter this to fit your needs)
var sideLength=20;
// allow the point to wobble up to 2.5 pixels from its "usual" position
var radius=2.5*Math.random();
// allow that point to wobble at a random angle around its "usual" position
var radianAngle=2*Math.PI*Math.random();
// do the calculation of the new wobbled intersection point
// the x & y are the cell's horizontal(x) and vertical(y) position on the grid
var cx=x*sideLength+radius*Math.cos(radianAngle);
var cy=y*sideLength+radius*Math.sin(radianAngle);
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// declare an array
var points=new Array(17);
for(var i=0;i<points.length;i++){
points[i]=new Array(17);
}
var sideLength=20;
// fill the array with
for(var y=0;y<17;y++){
for(var x=0;x<17;x++){
// create a random semi-offset grid point
var radius=2.5*Math.random();
var radianAngle=2*Math.PI*Math.random();
var cx=x*sideLength+radius*Math.cos(radianAngle);
var cy=y*sideLength+radius*Math.sin(radianAngle);
// if this is a sidepoint, don't offset (sides are straight)
if(x==0){cx=0;}
if(y==0){cy=0;}
if(x==16){cx=x*sideLength;}
if(y==16){cy=y*sideLength;}
// add this gridpoint to the points array
points[x][y]={x:cx+10,y:cy+10};
}
}
// stroke the 4 sides of each cell
for(var y=0;y<16;y++){
for(var x=0;x<16;x++){
strokeCell(x,y);
}
}
// draw the 4 sides of the cell
function strokeCell(x,y){
var pt0=points[x][y];
var pt1=points[x+1][y];
var pt2=points[x+1][y+1];
var pt3=points[x][y+1];
ctx.beginPath();
ctx.moveTo(pt0.x,pt0.y);
ctx.lineTo(pt1.x,pt1.y);
ctx.lineTo(pt2.x,pt2.y);
ctx.lineTo(pt3.x,pt3.y);
ctx.closePath();
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400></canvas>
</body>
</html>