Question

我一直在尝试制作一个桌面应用程序（javascript，画布），并以某种模式绘制413.280个可单击的圆圈，但是我真的不知道该怎么做。我不相信canvas是最好的解决方案，但我不知道如何解决这个问题并获得性能合理的应用。

这是我要获取的布局： circle layout

我希望每行内有2行圆圈。中间的分隔应留空。

每行必须是588个圆圈。

每右行必须为560个圆圈

每侧有180行，这意味着左侧有（588 * 2 * 180）= 211680个圆圈。

右侧有（560 * 2 * 180）= 201600个圆圈。

有人能指出我正确的方向吗，也许有个线索我可以如何以最有效的方式解决这个问题？预先感谢。

编辑：这是我到目前为止获得的JSFiddle jsfiddle.net/cmxLoqej/2/

JavaScript

window.onload = draw;

function draw() {
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var ycoordinate = 20;

//draw the line 180 times
  for (var x = 1; x <= 180; x++) {

    // draw the left side
    for (var i = 1; i <= 1; i++){
        c.strokeStyle = 'black';
        c.moveTo(0,ycoordinate);
        c.lineTo(6468,ycoordinate);
        c.stroke();
        ycoordinate = ycoordinate + 40;
        }          
  }
 var ycoordinate = 20;

  //draw right side
    for (var x = 1; x <= 180; x++) {


        for (var j = 1; j <= 1; j++){
            c.strokeStyle = 'black';
            c.moveTo(6776,ycoordinate);
            c.lineTo(canvas.width,ycoordinate);
            c.stroke();
            ycoordinate = ycoordinate + 40;
        }
    }
}


var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var canvasPattern = document.createElement("canvas");
  canvasPattern.width=11;
  canvasPattern.height=20;
  var contextPattern = canvasPattern.getContext("2d");
  contextPattern.beginPath();

  contextPattern.arc(5, 10, 5, 0, 2 * Math.PI, false);
  contextPattern.strokeStyle = '#003300';
  contextPattern.stroke();
  var pattern = context.createPattern(canvasPattern,"repeat");
 context.fillStyle = pattern;
 context.fillRect(0, 20, 6468, 7160);
 context.fill();

 var canvas2 = document.getElementById('canvas');
  var context2 = canvas.getContext('2d');

  var canvasPattern2 = document.createElement("canvas");
  canvasPattern2.width=11;
  canvasPattern2.height=20;
  var contextPattern2 = canvasPattern.getContext("2d");
  contextPattern2.beginPath();

  contextPattern2.arc(5, 10, 5, 0, 2 * Math.PI, false);
  contextPattern2.strokeStyle = '#003300';
  contextPattern2.stroke();
  var pattern2 = context2.createPattern(canvasPattern2,"repeat");
  context2.fillStyle = pattern;
  context2.fillRect(6776, 20, 6160, 7160);
  context2.fill();

HTML

<!DOCTYPE html>
<html>
<body> 
<canvas {
 id="canvas"; 
 width= "12936" ; 
 height ="7400";
 style= "border: 1px solid black;";
 padding: 0;
 margin: auto;
 display: block;
}>
</canvas>
</body>
</html>

Answer 1

使用圆圈的填充patterns创建矩形的画布图像

左侧的一排
单排右侧
每侧的组合行
一张180行的画布

根据需要在使用context2D.createPattern方法的过程中使用临时CANVAS对象。您不必只为了操纵像素就将它们添加到DOM。

在学习时根据需要修改算法。编码愉快！

更新（编辑）

运行添加到问题中的代码，可以看到所有圆在水平方向上均等分布。和垂直。

一种更简单的绘制画布的方法可能是用圆圈图案填充两个完全覆盖画布左右两边的矩形，然后在画布上绘制网格线，而不是在网格之前绘制网格线。

找到被点击的圈子

画布上的单击事件侦听器传递了mouse event对象。

确定单击哪个圆的经典方法是首先对屏幕位置的screenX和screenY事件属性，文档滚动的window.scrollX和window.scrollY执行算术运算数量以及画布在文档中的位置，以查找单击在画布中的位置。

尽管尚未完全标准化，但是鼠标事件对象的offsetX和offsetY属性可以直接提供结果。 MDN参考显示了相当好的跨浏览器支持。

然后，可以使用画布布局知识来确定单击了哪个矩形圆 pattern ，如果单击是在圆内，则可以使用一点代数。

以某种模式编码500万个圆圈

1 个答案: