Javascript HTML5画布仅调整html的大小_Javascript_Html

Javascript HTML5画布仅调整html的大小

javascript html

Javascript HTML5画布仅调整html的大小,javascript,html,Javascript,Html,我目前正在处理一个涉及canvas元素的项目，在调整canvas大小时遇到了一个问题。我试图通过将宽度和高度除以2在画布的中心绘制图像，但是每当我调整画布的大小时，它只会更改HTML，因此当我重新绘制图像时，它仍然以旧画布的一半宽度和高度绘制图像。我不确定这是否是一个DOM问题或是什么，但如果有任何帮助，我将不胜感激。我在Safari、FF和Chrome中进行了测试编辑：代码 <body> <div id="holder"> <div id="dropdown"&

我目前正在处理一个涉及canvas元素的项目，在调整canvas大小时遇到了一个问题。我试图通过将宽度和高度除以2在画布的中心绘制图像，但是每当我调整画布的大小时，它只会更改HTML，因此当我重新绘制图像时，它仍然以旧画布的一半宽度和高度绘制图像。我不确定这是否是一个DOM问题或是什么，但如果有任何帮助，我将不胜感激。我在Safari、FF和Chrome中进行了测试

编辑：代码

<body>
<div id="holder">
<div id="dropdown">
  <div id="ddcontents" style="display: none;">
    <button onclick="fade()">Options</button>
    <button onclick="getSize()">Canvas Size</button>
    <button onclick="redraw()" disabled="true">Redraw</button>
  </div>
</div>
<canvas id="c" height="480" width="640">Your browser does not support HTML5.</canvas>
<div id="options" style="display: none">
 <div id="optcontent" style="display: none">
    <center><h1>Options</h1></center>       
    <div id="sound">
        <div>Volume:
            <form oninput="volumenumber.value = parseInt(volume.value)">
                <input type="range" name="volume" min="0" max="100" value="80" disabled="true">
                <input type="hidden" name="hello" value="%">
                <output name="volumenumber" for="volume">80</output>
            </form>
            Resolution:
            <select id="resolution">
                <option value="480p">480x640</option>
                <option value="720p">720x1280</option>
            </select>
        </div>
    </div>
    <div id="closeoptions">
        <button onclick="apply()">Apply</button>
        </div>
    </div>
</div>

</div>


<script src="options.js"></script>
</body>
</html>

使用画布时，必须确保其内部结构与呈现html区域的大小相同

你可以这样做：

this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;

通常，我也会存储这些尺寸以进行渲染计算：

var w = this.canvas.clientWidth; // stores the width for later use
var h = this.canvas.clientHeight;
this.canvas.width = w;
this.canvas.height = h;

编辑：要更改元素大小，请在前面的代码之前执行以下操作：

$('#mycanvas').width(newWidthInPx);

如果您可以在jsfiddle.net或jsbin.com上发布演示问题的代码，那么某人将更容易确定问题所在。发布后，通过dystroy的编辑。好的，这似乎解决了一半问题，我使用的警报确实验证了画布大小的更改，但画布本身的大小没有更改。

$('#mycanvas').width(newWidthInPx);