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

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

來源

2016-11-23 Matt Brand

如何寬度和高度變量分配以及如何在畫布寬度和高度的分配？ – 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);

來源

2017-08-08 02:09:22 Jacksonkr

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

Canvas filltext垂直拉伸

回答

相關問題