如何用图像填充html5画布网格正方形？

Question

我是 html5 画布的新手。我想绘制一个画布网格，并用API响应中的图像填充每个网格正方形。我有以下代码来绘制网格，但是我正在努力用图像填充每个正方形。 这是js代码：

window.onload = function(){
    var c= document.getElementById('canvas');
    var ctx=c.getContext('2d');
    ctx.strokeStyle='white';
    ctx.linWidth=4;
    for(i=0;i<=600;i=i+60)
    {
      ctx.moveTo(i,0);
      ctx.lineTo(i,600);
      ctx.stroke();
    }

    for(j=0; j<=600; j=j+60)
    {
        ctx.moveTo(0,j);
        ctx.lineTo(600,j);
        ctx.stroke();
    }
}

此代码可帮助我绘制画布网格，但如何访问每个正方形并用图像填充它。我提到了与此相关的链接，但似乎很难理解。有人可以帮我吗？

Answer 1

如果不确切知道api响应如何返回图像，很难回答您的问题。假设api响应正在返回图像本身（而不是JSON中的图像数据或类似的图像），这是一种解决方案：

html：

  metrics_path: /probe
  params:
    jsonpath: [$.details.db.details.hello] # Look for the nanoseconds field
  static_configs:
    - targets:
      - https://URL path
  relabel_configs:
    - source_labels: [__address__]
      target_label: __param_target
    - source_labels: [__param_target]
      target_label: instance
    - target_label: __address__
      replacement: jsonexporter:9116  # Json exporter.
  metric_relabel_configs:
    - source_labels: value
      target_label:  hello``` 



But the issue is, getting error while reloading the Prometheus as follows:

level=error ts=2019-04-16T06:05:24.395218368Z caller=main.go:597 err="Error loading config couldn't load configuration (--config.file=/etc/prometheus/config_out/prometheus.env.yaml): parsing YAML file /etc/prometheus/config_out/prometheus.env.yaml: yaml: unmarshal errors:\n  line 3871: cannot unmarshal !!str `value` into model.LabelNames"

Cam someone help me to correct this?

javascript：

<canvas id="canvas" width="600" height="600"></canvas>

工作示例：