如何对javascript for循环中两个数组成员的值求和_Javascript_Arrays_Canvas_Sum

如何对javascript for循环中两个数组成员的值求和

javascript arrays canvas

如何对javascript for循环中两个数组成员的值求和,javascript,arrays,canvas,sum,Javascript,Arrays,Canvas,Sum,我试图使用图形的x值加上其宽度，w计算画布图形上每个图形的标签偏移量我只想得到x和w值的总和，并将其用作ctx.fillText（）的参数，就像这样这将偏移文本标签，使其位于每个形状元素的右侧 ctx.fillText(data[i].name, +data[i].x + data[i].w, +data[i].y + 15) 我有一个数组： var data = [ {"name": "Free-OH", "x": "270", "y": "20", "w": "20", "h"

我试图使用图形的

值加上其宽度，

计算画布图形上每个图形的标签偏移量

我只想得到

和

值的总和，并将其用作

ctx.fillText（）

的参数，就像这样

这将偏移文本标签，使其位于每个形状元素的右侧

ctx.fillText(data[i].name, +data[i].x + data[i].w, +data[i].y + 15)

我有一个数组：

var data = [
    {"name": "Free-OH", "x": "270", "y": "20", "w": "20", "h": "20", "color": "blue"},
    {"name": "Bonded OH", "x": "280", "y": "50", "w": "58", "h": "20", "color": "green"},
    {"name": "-C=-CH", "x": "310", "y": "80", "w": "20", "h": "20", "color": "purple"}  
];

使用我在JavaScript for循环中使用的各种值。在我尝试使用

data[I].x+data[I].w的值计算标签的偏移量之前，一切正常
这似乎不起作用，创建这样的变量也不起作用
var offset=data[i].x+data[i].w

在for循环的开头。看起来这应该很简单，但显然不是。任何帮助都将不胜感激。这是你的电话号码。我的完整代码如下。非常感谢
<!DOCTYPE html>
<html>
<head>
<title>Wavelength to Compound</title>
<meta charset="utf-8" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/
jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("FirstCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 2990, 240);
ctx.strokeStyle = "#DDDDDD";
ctx.beginPath();
ctx.moveTo(5, 210);
ctx.lineTo(2995, 210);
ctx.closePath();
ctx.stroke();
ctx.lineWidth = 1;
ctx.font = "14pt Arial";
ctx.fillText("0", 10, 235); 
ctx.fillText("30", 2970, 235);


var data = [{"name": "Free-OH", "x": "270", "y": "20", "w": "20", "h": "20", "color": "blue"},
            {"name": "Bonded OH", "x": "280", "y": "50", "w": "58", "h": "20", "color": "green"},
            {"name": "-C=-CH", "x": "310", "y": "80", "w": "20", "h": "20", "color": "purple"}  
];

for (var i = 1; i < 150; i++){
    ctx.beginPath();
    ctx.moveTo(i*20, 210);
    ctx.lineTo(i*20, 5);
    ctx.closePath();
    ctx.stroke();
}

for (var i = 1; i < 30; i++){
    ctx.lineWidth = 1;
    ctx.fillText(i/2, i*100-7.5, 235);
}

for (var i = 0; i < data.length; i++){
ctx.fillStyle = data[i].color;
ctx.fillRect(data[i].x, data[i].y, data[i].w, data[i].h);
ctx.fillText(data[i].name, +data[i].x + data[i].w, +data[i].y + 15);
}


});
</script>
</head>
<body>
<canvas id="FirstCanvas" width="3000" height="250">
<p>Wavelength to Compound</p>
<div id="content"><div/>
</canvas>
</body>
</html>


合成波长
$（文档）.ready（函数（）{
var canvas=document.getElementById（“FirstCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.strokeRect（5,52990240）；
ctx.strokeStyle=“#DDDDDD”；
ctx.beginPath（）；
ctx.moveTo（5210）；
ctx.lineTo（2995210）；
ctx.closePath（）；
ctx.stroke（）；
ctx.lineWidth=1；
ctx.font=“14pt Arial”；
ctx.fillText（“0”，10235）；
ctx.fillText（“30”，2970235）；
var数据=[{“名称”：“自由OH”，“x”：“270”，“y”：“20”，“w”：“20”，“h”：“20”，“颜色”：“蓝色”}，
{“名称”：“粘结OH”，“x”：“280”，“y”：“50”，“w”：“58”，“h”：“20”，“颜色”：“绿色”}，
{“名称”：“-C=-CH”，“x”：“310”，“y”：“80”，“w”：“20”，“h”：“20”，“颜色”：“紫色”}
];
对于（变量i=1；i<150；i++）{
ctx.beginPath（）；
ctx.moveTo（i*20210）；
ctx.lineTo（i*20,5）；
ctx.closePath（）；
ctx.stroke（）；
}
对于（变量i=1；i<30；i++）{
ctx.lineWidth=1；
ctx.fillText（i/2，i*100-7.5235）；
}
对于（变量i=0；i
您正在尝试对两个字符串求和…首先使用排版将字符串更改为整数
var offset = Number(data[i].x) + Number(data[i].w)

data[i].x
和data[i].w
是字符串。要将它们添加到一起，请执行以下操作之一：
+data[i].x + +data[i].w;

parseInt(data[i].x, 10) + parseInt(data[i].w, 10);

Number(data[i].x) + Number(data[i].w);

parseInt
需要一个基数。哇，太快了！谢谢你，博恩斯牧师，现在工作得很好！我忘记了JSON数组中的值是字符串，因为我在另一个for循环中使用整数。这很有道理。谢谢