使用数组在画布上打印点（JavaScript）_Javascript_Arrays_Canvas

使用数组在画布上打印点（JavaScript）

javascript arrays canvas

使用数组在画布上打印点（JavaScript）,javascript,arrays,canvas,Javascript,Arrays,Canvas,所以我的老师想让我们画一幅画布。他给了我们一些我无法理解的令人困惑的指示使用路径，打印阵列中的点并将其显示为线条图。调整阵列中每个成员的x坐标，然后调整y坐标以显示每个成员的值画布中的y坐标将0置于屏幕顶部，因此需要从图形高度+边框中减去每个数组值大多数折线图显示的数据相对于图的底部而不是顶部。x坐标应由机组进行调整每个数组值的间距。我强烈建议您使用循环我真的很想解释一下这意味着什么以及怎么做 HTML: 像这样 graph（）；函数图（）{ var canvas=doc

所以我的老师想让我们画一幅画布。他给了我们一些我无法理解的令人困惑的指示

使用路径，打印阵列中的点并将其显示为线条图。调整阵列中每个成员的x坐标，然后调整y坐标以显示每个成员的值画布中的y坐标将0置于屏幕顶部，因此需要从图形高度+边框中减去每个数组值大多数折线图显示的数据相对于图的底部而不是顶部。x坐标应由机组进行调整每个数组值的间距。我强烈建议您使用循环

我真的很想解释一下这意味着什么以及怎么做

HTML:

像这样

graph（）；
函数图（）{
var canvas=document.getElementById（“myCanvas”）；
var theContext=canvas.getContext（“2d”）；
var销售额=[52,48,74,31,47,25,67,78,45,15,85]；
var宽度=300；
var高度=100；
var uSpacing=10；
var-border=20；
var标量=100；
var抵销=（1/（sales.length-1））*宽度；
strokeRect（0，0，宽度，高度）
context.beginPath（）；
context.moveTo（0，sales[0]）；
对于（变量x=1；x


您的浏览器不支持HTML5画布标记

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <canvas id="myCanvas" width="600" height="600" style="border: 1px solid #ddd;">Your browser does not support the HTML5 canvas tag
     </canvas>
    <script src="script.js">
    </script>
</body>
</html>

graph();

function graph() {
  var canvas = document.getElementById("myCanvas");
  var theContext = canvas.getContext("2d");
  var sales = [52, 48, 74, 31, 47, 25, 67, 78, 45, 15, 85];
  var width = 300;
  var height = 100; 
  var uSpacing = 10;
  var border = 20;
  var scalar = 100;

  theContext.strokeRect(border, border, width, height)
  theContext.beginPath();
  theContext.moveTo(100,100);
  theContext.lineTo(52,48);
  theContext.stroke();
}