Question

我使用画布来绘制文本，并且在某些移动设备上它会间歇性地垂直拉伸，因此文本的底部应该是它应该的位置，但文本的顶部会延伸到显示的顶部。我无法在iPhone 6+上自行复制，但据报道它发生在iPhone 6+以及其他iPhone和机器人上。

这是我使用的代码，相当标准：

    ctx.globalalpha = 1.0;
    ctx.fillStyle = "white";
    ctx.font = "40.0rem CenturyGothic";
    ctx.textAlign = "center";
    ctx.fillText("TOUCH TO START", width / 2, (height / 2) + 8, width);

我在文本后面绘制的图像没有被拉伸，因此不是整个画布被拉伸，而是画在画布上的文本。

我在javascript中使用此代码设置画布宽度和高度：

    canvas.width = window.innerWidth;
    canvas.height = (1600 / 1000) * canvas.width;

我在这里设置了css的宽度和高度：

    #canvas {
      width: 100%;
      height: auto;
    }

还有其他人经历过这个吗？关于如何解决它的任何想法？

Answer 1

我不是特别喜欢这种方式，因为它会拉伸像素，但它可以用于一些基本的东西。

我将文本写入屏幕外的画布，然后将该图像绘制回原始画布。当它被拉回时我会拉伸图像。现在，拉伸被添加到原始宽度和高度。我这样做是因为宽度和高度保持相对，例如。你的话每次都可能有不同的大小。

https://jsfiddle.net/0xbtm4o1/

UPDATE QRTZ_TRIGGERS SET TRIGGER_STATE = "PAUSED"

Canvas filltext是垂直拉伸的

1 个答案: