JS Array Canvas

Question

我有这个数组：

var Test1 = [
 {ex: 'ABC', exx: 1},
 {ex: 'BCA', exx: 2},
 {ex: 'CBA', exx: 2}
];

我正在使用Canvas元素开发条形图，我想知道是否可以从我的数组中获取要显示的值，以及如何进行操作。

Answer 1

我没有发现任何问题，您可以非常轻松地访问Test1中的元素：

console.log("ex: "+Test1[0].ex+"   exx: "+Test1[0].exx);

或循环

for(var i=0;i< Test1.length;i++)
console.log("ex: "+Test1[i].ex+"   exx: "+Test1[i].exx);

DOM只不过是你的html页面。加载网页时，浏览器会创建页面的文档对象模型。同时Test1是 js 脚本中的对象。所以，不幸的是，否。您的DOM只不过是一组html标记，例如head，body等。当然，能够将脚本的值呈现到页面中，但是它无法在自己的中获取它们。

这应该给你一些解决方案

＆＃13;

＆＃13;

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    
    //horizontal axe
    
    ctx.beginPath();
    ctx.moveTo(50, 630);
    ctx.lineTo(300, 630);
    ctx.lineWidth = 2;
    ctx.strokeStyle = "black";
    ctx.stroke();
    
    //Vertical axe
    
    ctx.beginPath();
    ctx.moveTo(50, 630);
    ctx.lineTo(50, 430);
    ctx.strokeStyle = "black";
    ctx.stroke();
    
    //30 in vertical
    
    ctx.font = 'bold small-caps sans-serif';
    ctx.fillStyle = 'BLACK';
    ctx.fillText('30.000', 2, 485);
    ctx.beginPath();
    ctx.moveTo(50, 480);
    ctx.lineTo(40, 480);
    ctx.lineWidth = 2;
    ctx.strokeStyle = "black";
    ctx.stroke();
    
    //20 in vertical
    ctx.fillText('20.000', 2, 535);
    ctx.beginPath();
    ctx.moveTo(50, 530);
    ctx.lineTo(40, 530);
    ctx.lineWidth = 2;
    ctx.strokeStyle = "black";
    ctx.stroke();
    
    //10 in vertical
    
    ctx.font = 'bold small-caps sans-serif';
    ctx.fillStyle = 'BLACK';
    ctx.fillText('10.000', 2, 585);
    ctx.beginPath();
    ctx.moveTo(50, 580);
    ctx.lineTo(40, 580);
    ctx.lineWidth = 2;
    ctx.strokeStyle = "black";
    ctx.stroke();
    
    var Test1 = [
     {ex: 'ABC', exx: 1},
     {ex: 'BCA', exx: 2},
     {ex: 'CBA', exx: 2}
    ];
    ///*
    for(var i=0;i< Test1.length;i++){
         // console.log("ex: "+Test1[i].ex+"   exx: "+Test1[i].exx);   
    		ctx.font = 'bold small-caps sans-serif';
        ctx.fillStyle = 'BLACK';
        ctx.fillText(Test1[i].ex,100+ i*135, 660);
        ctx.beginPath();
        ctx.moveTo(i*100, 630);
        ctx.lineTo(i*100, 640);
        ctx.strokeStyle = "black";
        ctx.stroke();
        
        ctx.beginPath();
        ctx.rect(100+i*100, 400, 100, Test1[i].exx*100);
        ctx.fillStyle = '#5b5b5b';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();
        
    }

＆＃13;

<canvas id="canvas" width="750" height="700"></canvas>

＆＃13;

＆＃13;

＆＃13;