简体   繁体   English

动态对象模式,HTML / Javascript

[英]Dynamic Object Pattern, HTML/Javascript

I've done dynamic objects and patterns before in html, but I came accross with this exercice I am doing on the holidays vacation and can't get it right though I'm sure its pretty simple :) 我之前在html中已经完成了动态对象和模式,但是我在假期假期时遇到了这个练习,虽然我确定它非常简单但是无法正确行事:)

The exercice asks to create an object "unit" made by 4 circles like in the images bellow, in a 500x500 canvas . 该练习要求在500x500画布中创建一个由4个圆圈组成的对象“单元”,如下图所示。 Then you have to create a function called patternCircle(n) to make a pattern from that "unit". 然后你必须创建一个名为patternCircle(n)的函数来从该“单元”创建一个模式。 Notice that n=1 shows the "unit", n=2 2x2, n=3 3x3, n=4 4x4 pattern in the canvas. 请注意,n = 1表示画布中的“单位”,n = 2 2x2,n = 3 3x3,n = 4 4x4图案。

I can successfully create the "unit" but when I use my pattern function the overlapping isnt right but the (x,y) of the circles seem correct. 我可以成功创建“单位”,但是当我使用我的模式功能时,重叠不对,但圆圈的(x,y)看起来是正确的。
I use three var, i=lines, j=rows, and side(side of the canvas, 500)/n2, Two for cicles, that create the lines and row but it doesn't create the image I'm looking for. 我使用三个var,i =行,j =行和side(画布的一边,500)/ n2,两个用于cicles,它创建了行和行,但它不会创建我正在寻找的图像。

I really hope you can take a glance at the code and help. 我真的希望你能看一眼代码并提供帮助。

The unit - formed by 4 circles with an interior circle each. 单位 - 由4个圆圈组成,每个圆圈有一个内圈。 The radius of the interior circle is 80% of the bigger one 内圆的半径是较大圆的半径的80%

Unit in a pattern of 4x4 - Create function that creates the pattern in the image using the "unit" 4x4模式的单位 - 创建使用“单位”在图像中创建图案的功能

var screen, paint;

function inicGraf() {
  screen = document.getElementById("screen");
  paint = screen.getContext("2d");
}

function circleScreen(x, y, radius, colorLine, colorInside) {
  paint.lineWidth = 1;
  paint.strokeStyle = colorLine;
  paint.fillStyle = colorInside;
  paint.beginPath();
  paint.arc(x, y, radius, 0, 2.0 * Math.PI);
  paint.closePath();
  paint.fill();
  paint.stroke();
}

function figureCircle(x, y, side) {
  var r1 = (side / 2.0),
    r2 = (((side / 2.0) * 80.0) / 100.0);
  circleScreen(x + r1, y + side, r1, "#449779", "#449779");
  circleScreen(x + r1, y + side, r2, "#013D55", "#013D55");
  circleScreen(x + side, y + r1, r1, "#E6B569", "#E6B569");
  circleScreen(x + side, y + r1, r2, "#AA8D49", "#AA8D49");
  circleScreen(x, y + r1, r1, "#E6B569", "#E6B569");
  circleScreen(x, y + r1, r2, "#AA8D49", "#AA8D49");
  circleScreen(x + r1, y, r1, "#449779", "#449779");
  circleScreen(x + r1, y, r2, "#013D55", "#013D55");
}

function patternCircle(n) {
  var i, j, side = 500 / n;
  for (i = 0; i < n; i++) {
    for (j = 0; j < n; j++) {
      figureCircle(i * side, j * side, side);
    }
  }
}

What I did: 我做了什么:

  • separate the two circle styles, left/right ( figureCircleLeft() ) vs top/bottom ( figureCircleBottom() ) 将两个圆圈样式分开,左/右( figureCircleLeft() )vs top / bottom( figureCircleBottom()
  • change of the for loop with j , running backwards with included zero value 使用j更改for循环,使用包含的零值向后运行
  • change of the for loop with i , running inclusive n value 使用i更改for循环,运行包含n的值
  • double the last for loop, to separate the order of the circles 将最后一个for循环加倍,以分隔圆的顺序
  • write first all left circles 先写下所有左边的圆圈
  • write the all bottom circles 写下所有底部圆圈
  • changed the y position in figureCircleBottom() 改变了figureCircleBottom()y位置

Working Example: 工作实例:

 var screen, paint; function inicGraf() { screen = document.getElementById("screen"); paint = screen.getContext("2d"); } function circleScreen(x, y, radius, colorLine, colorInside) { paint.lineWidth = 1; paint.strokeStyle = colorLine; paint.fillStyle = colorInside; paint.beginPath(); paint.arc(x, y, radius, 0, 2 * Math.PI); paint.closePath(); paint.fill(); paint.stroke(); } function figureCircleLeft(x, y, side) { var r1 = side / 2, r2 = r1 * 80 / 100; circleScreen(x, y + r1, r1, "#E6B569", "#E6B569"); circleScreen(x, y + r1, r2, "#AA8D49", "#AA8D49"); } function figureCircleBottom(x, y, side) { var r1 = side / 2, r2 = r1 * 80 / 100; circleScreen(x + r1, y, r1, "#449779", "#449779"); circleScreen(x + r1, y, r2, "#013D55", "#013D55"); } function patternCircle(n) { var i, j, side = 500 / n; for (j = n; j >= 0; j--) { for (i = 0; i <= n; i++) { figureCircleLeft(i * side, j * side, side); } for (i = 0; i <= n; i++) { figureCircleBottom(i * side, j * side, side); } } } inicGraf(); patternCircle(3); 
 <form name="f"><input name="n" value="3" onchange="patternCircle(+document.fnvalue);"><input type="submit" value="Set Units"></form> <canvas id="screen" width="500" height="500"></canvas> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM