HTML Canvas Width

Question

我對畫布的初始寬度有問題。

我所擁有的是一個具有圖像背景的畫布元素，它被設置爲覆蓋，而不是在jquery中，畫布寬度設置爲window.InnerWidth，高度是寬度/ 3.（這是爲了保持背景圖像的比例，因爲它是一個橫幅，不能被切斷或拉伸）。

我的問題是，畫布的初始比例是300 x 150，而不是計算出來的屏幕尺寸。所以會發生的是，您將橫幅加載爲300px x 150px，並且在一秒鐘左右跳到正確的大小後。

這裏有這樣一個例子：CodePen

function initHeader() { 
    width = window.innerWidth; 
    height = width/3; 
    target = { 
     x: width/2, 
     y: height/3 
    }; 

    canvas = document.getElementById('canvas'); 
    canvas.width = width; 
    canvas.height = height; 
    ctx = canvas.getContext('2d'); 

通過CSS我試過設置畫布100％的寬度，它延伸旗幟，創造我不旗幟之下的差距想。

我試過了所有我能想到的，只是不能想出有效的解決方案。

任何建議將大大appreacited！

Answer 1

所以它需要一些延遲來調整圖像大小？所以當畫布不調整大小時不要初始化它。

canvas.width = width; 
canvas.height = height; 
canvas.style.backgroundImage = "...." 

希望得到這個幫助。