javascript - 声明一个数据元素数组，以获得 Canvas 上的散点

Question

考虑这个jsfiddle 。这里我想声明一个数据集，以便获取 Canvas 上的散点。

 //   var data = [2,2],[3,3],[3,4]; // data to be declared

 var bw = 400;
 var bh = 400;

 var p = 10;

 var cw = bw + (p*2) + 1;
 var ch = bh + (p*2) + 1;

从而获得如下输出。如何实现这一目标？

Answer 1

你可以写一个这样的函数

function drawData(_data) {
  _data.forEach(function(elem){
    console.log(elem[0], elem[1]);
    context.beginPath();
    context.arc((elem[0]*40 + 10),(elem[1]*40 + 10),10,0,2*Math.PI);
    context.fill();
  });
}

FIDDLE

编辑颜色

您可以为颜色定义一个数组，例如

var colors = ["black","yellow","blue","red","orange"];

然后在 .fill 之前的绘制函数中你可以这样做

context.fillStyle = colors[elem[1]];

<强> UPDATED FIDDLE