HTML 画布宽度答案

【问题标题】：HTML Canvas WidthHTML 画布宽度
【发布时间】：2015-06-18 11:18:51
【问题描述】：

我对画布的初始宽度有疑问。

我拥有的是一个画布元素，其图像背景设置为覆盖，而不是在 jquery 中，画布宽度设置为 window.InnerWidth，高度为宽度/3。（这是为了保留背景图像与横幅的比例，不能被剪断或拉伸）。

我的问题是画布的初始比例为 300 x 150，而不是根据屏幕尺寸计算得出。所以发生的情况是，您以 300 像素 x 150 像素的尺寸加载横幅，然后在一秒钟左右跳转到正确的大小。

这是一个例子：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%，它会拉伸横幅并在横幅下方创建一个我不想要的间隙。

我已经尝试了所有我能想到的方法，但无法提出有效的解决方案。

任何建议将不胜感激！

【问题讨论】：

对于初学者来说，您的图像的宽高比接近 3.28。从那里开始。
那不是真正的横幅，只是举个例子

标签： javascript jquery html css canvas

【解决方案1】：

所以调整图像大小需要一些延迟？所以当画布还没有调整大小时不要初始化它。

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

希望对您有所帮助。

【讨论】：

谢谢，效果比图片跳来跳去好多了。