Canvas filltext垂直拉伸

问题描述：

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

这是我使用的代码，非常标准的期待：

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; 
    }

有其他人遇到此？有关如何解决它的任何想法？

如何宽度和高度变量分配以及如何在画布宽度和高度的分配？ – Jon

注意以上。谢谢！ –

在您对fillText的调用中，您正在使用宽度和高度变量，这些变量是如何分配的？ – Jon

答

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

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

https://jsfiddle.net/0xbtm4o1/

CanvasRenderingContext2D.prototype.stretchText = function(text, x, y, xw, xh) { 
    var c = document.createElement("canvas").getContext("2d"); 
    c.font = this.font; 
    c.fillColor = this.fontColor; 
    var w = c.measureText(text).width; 
    var h = parseInt(this.font); 
    c.fillText(text, 0, h); 
    this.drawImage(c.canvas, 0, 0, w, h, x, y, w+xw, h+xh); 
} 


var ctx = document.getElementById("c").getContext("2d"); 

ctx.font = "20px Arial"; 
ctx.fillColor = "black"; 
ctx.stretchText("Hello World!", 10, 20, 0, 40);

你可能想包括：c.fillStyle = this。填充样式;在下面（或者替代）c.fillColor = this.fontColor;所以字体颜色可以设置... –

Canvas filltext垂直拉伸

相关推荐