Question

我正在使用画布来获取信息并将其绘制到图表上。最终它将转到php并从服务器检索数据，但是现在我只需要它来正确地绘制任何数据。

我有画布画出我喜欢它并开始绘制数据，但是当我这样做时并没有给我一条细路，它更像是一个涵盖一切的巨型blob。在查看我的代码时，重要的是要知道它主要是画布的初始化，但我需要发布大部分内容，以便为程序中发生的事情提供上下文。

var canvas ;
var context ;
var Val_max;
var Val_min;
var sections;
var xScale;
var yScale;
var Apple =  [10.25,10.30,10.10,10.20];

function init() {
            Val_max = 10.5;
            Val_min = 10;
            var stepSize = .049999999999999; //.5 results in inaccurate results
            var columnSize = 50;
            var rowSize = 20;
            var margin = 20;
            var xAxis = [" "," "," ", " ", " ", "10AM", " ", " ", " ", " ", " ", "11AM", " ", " ", " ", " ", " ", "12PM", " ", " ", " ", " ", " ",  "1PM", " ", " ", " ", " ", " ", "2PM", " ", " ", " ", " ", " ", "3PM", " ", " ", " ", " ", " ", "4PM"]; 
            sections = xAxis.length-1;

            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            context.fillStyle = "#808080";

            yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min); // Total height of the graph/range of graph
            xScale = (canvas.width - rowSize - margin) / sections; // Total width of the graph/number of ticks on the graph

            context.strokeStyle="#808080"; // color of grid lines
            context.beginPath();
                // print Parameters on X axis, and grid lines on the graph

                context.moveTo(xScale+margin, columnSize - margin);
                context.lineTo(xScale+margin, columnSize + (yScale * 10 * stepSize) - margin);      //draw y axis       

            for (i=1;i<=sections;i++) {
                var x = i * xScale;
                context.moveTo(x + margin, columnSize + (yScale * 10 * stepSize) - margin);
                context.lineTo(x + margin, columnSize + (yScale * 10 * stepSize) - margin - 5); //draw ticks along x-axis
                context.fillText(xAxis[i], x,canvas.height - margin); //Time along x axis
            }
                // print row header and draw horizontal grid lines
            var count =  0;
            context.moveTo(xScale+margin, 260);
            context.lineTo(canvas.width - margin, 260); // draw x axis

            for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
                scale = scale.toFixed(2);
                var y = columnSize + (yScale * count * stepSize) - margin; 

                context.fillText(scale, margin - 20,y);
                context.moveTo(xScale+margin, y);
                context.lineTo(xScale+margin+5, y); //Draw ticks along y-axis
                count++;
            }
            context.stroke();

            context.translate(rowSize,canvas.height + Val_min * yScale);
            context.scale(1,-1 * yScale);

                // Color of each dataplot items

            context.strokeStyle="#FF0066";
            //plotData(Apple);
            context.strokeStyle="#9933FF";
            //plotData(Samsung);
            context.strokeStyle="#000";
            //plotData(Nokia);


        }

好的，这是画布的初始化，我知道它很乱，但我想我必须从中引用一些东西用于下一个函数。

        function plotData(dataSet) {
            var margin = 20;
            context.beginPath();
            context.moveTo(xScale+margin, dataSet[0]);
            for (i=0;i<sections;i++) {
                context.lineTo(i * xScale + margin, dataSet[i]);
            }
            context.stroke();
        }

该函数应该从数组中获取数据并将其绘制在图形上。我可以画它，但它不是一条细线。这是我正在拍摄的斑点图片。

它似乎也不能准确地绘制我的阵列中的坐标。

我知道这个问题非常深入，但任何帮助都会非常感激！

Answer 1

平移和比例应用于当前变换。每次你打电话给他们，你都会翻译并缩放一点。

使用保存和恢复来恢复原始转换。

context.save();  // <--------------------- added
context.translate(rowSize,canvas.height + Val_min * yScale);
context.scale(1,-1 * yScale);

    // Color of each dataplot items

context.strokeStyle="#FF0066";
//plotData(Apple);
context.strokeStyle="#9933FF";
//plotData(Samsung);
context.strokeStyle="#000";
//plotData(Nokia);
context.restore();   // <-------------------- added

在HTML 5的Canvas中创建数据时隙

1 个答案: