javascript - 如何使 scale() 函数成为最高优先级？

Question

我正在尝试制作一个程序，从一些计算中收集信息并将其绘制在 Canvas 图上。但是，我需要缩放图形，以便它可以容纳更大的数字。但每次我输入 ctx.scale(); 时，整个 Canvas 都会空白!我以为我可以通过先缩放 Canvas 来阻止它，但是缩放后 Canvas 上什么也没有画。

这是我的 Canvas 的编码:

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

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

所以如果你想放大那么远(即使你可能想缩小以显示更大的数字，即图表上更大的绘图)你需要将 Canvas 原点平移到你的新原点(左上角)您想看到的内容)，然后再缩放上下文。

你可以像这样使用翻译方法

ctx.translate(newX,newY);

但在此之前，您需要了解如何保存上下文的状态，以便您可以恢复到它。

假设您想放大图表的中心，您将转换到以下位置:

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

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