Question

我正在尝试制作一个程序，该程序从一些计算中收集信息并将其绘制在画布图上。但是，我需要缩放图表，以便它可以容纳更大的数字。但是每当我把整个画布空白放ctx.scale();时！我认为我可以通过首先缩放画布来阻止它，但是在缩放之后画布上没有画出任何东西。

这是我画布的编码：

var c=document.getElementById("graph_");
        var ctx=c.getContext("2d");
        graph_.style.backgroundColor="white";
        var z0=Math.max(Math.abs(a),Math.abs(b));
        var z=Math.round(z0);           
        var z1=Math.round(z);
        var z2=z*2
        // alert(z1);   
        // alert(z2);

        ctx.scale(3200/z,3200/z)    

        var xnew=360/2+360/2*a
        var ynew=360/2-360/2*b
        alert(xnew);    
        alert(ynew);

        ctx.font = '10px Calibri';
        ctx.fillText("( 0 , 0 )", 125, 85);
        ctx.fillText(z1, 210, 87);
        ctx.fillText(z2, 270, 87);

        ctx.fillText(z1*-1, 75, 87);
        ctx.fillText(z2*-1, 0, 87);

        ctx.fillText(z1, 120, 43.5);
        ctx.fillText(z2, 120, 10);

        ctx.fillText(z1*-1, 120, 120);
        ctx.fillText(z2*-1, 120, 145);

        ctx.lineWidth = 1;
        ctx.beginPath()
        ctx.moveTo(150, 0);
        ctx.lineTo(150, 400);
        ctx.closePath();

        ctx.lineWidth = .2;
        ctx.moveTo(0, 75);
        ctx.lineTo(400, 75);
        ctx.strokeStyle = "#8B8682";
        ctx.stroke();
        ctx.closePath();

          ctx.beginPath();
          ctx.lineWidth = 2;
          ctx.moveTo(xnew, 180);
          ctx.lineTo(180, ynew);
          ctx.strokeStyle = "red";
          ctx.stroke();

Answer 1

实际上，这些东西被绘制到画布上，你只是看不到它，因为你们放得太远并且仍然在图的左上角，因为绘图的默认原点是在左上角为0,0。

因此，如果您想要放大那么远（即使您可能想要缩小以显示更大的数字，即图形上的更大图纸），您需要将画布原点转换为新的原点（左上角）在缩放上下文之前，您希望看到的内容。

您可以使用

等翻译方法

ctx.translate(newX,newY);

但在你做之前，你要去保存上下文的状态，以便你可以恢复它。

假设您想要放大图形的中心，您将转换为以下点：

ctx.translate((-c.width /2 * scale) + offsetX,(-c.height / 2 * scale) + offsetY);

其中offsetX是画布宽度/ 2，offsetY是画布高度/ 2，缩放比例是你在ctx.scale调用中缩放的数量。

Answer 2

3200/z的价值究竟是什么？

我猜你正在大量缩放你的画布，以至于屏幕上唯一可见的东西就是画布的前几个像素。由于您没有在屏幕的左上角5个像素中绘制任何内容，因此您看不到任何内容。

如何使scale（）函数成为首要任务？

2 个答案: