如何获取宽度画布放在响应HTML页

我的HTML文件如何获取宽度画布放在响应HTML页

<div id="canvas"> 
<canvas id="myCanvas"> 
</div>

我的CSS文件

#canvas 
{ 
    width:100%; 
    height:100%; 
} 

#myCanvas 
{ 
    width:100%; 
    height:40%; 
}

使用JavaScript我绘制图像上粗帆布（重绘1秒后）。此页面响应。所以画布宽度随着浏览器宽度的改变而改变。在ImageDraw功能我想获得宽度帆布

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

canvaswidth = c.width;

但即使改变宽度的浏览器后，我得到画布宽度300问题是什么。

来源

2014-01-22 Chintan_chiku

HTMLCanvasElement的实际尺寸是由其“宽度”和“高度”属性定义的，它们是与CSS样式声明中不同的！设置不同于画布宽度和高度的CSS属性将导致浏览器缩放画布，就像缩放内容一样。

为了符合您的预期，您希望显式设置画布的宽度和高度，以匹配您期望从CSS声明获得的百分比，即：测量画布父容器的像素尺寸（假设这个例子中的宽度为320px），将它乘以选择的百分比（比如说90％，它是320 * .9 == 288像素），并将其设置到canvas的width属性上，对height et瞧。

注意：这会影响您的绘制方法，具体取决于您如何在画布上绘制内容（即使用绝对值作为坐标和尺寸时），实际上它可能更具可行性由CSS缩放！

来源

2014-01-22 09:20:01

我绘制图像，根据画布宽度和画布宽度的变化，当浏览器宽度改变时如何实现这一点？ –

在这种情况下，将画布宽度的计算存储在一个变量中，并使用这些和所有应该没问题，但我想知道：它实际上是您的响应式应用程序与CSS缩放问题吗？（即，图像看起来不错，并且它在所有分辨率下的表现都很好，并且问题与为什么画布的维度总是“300”）更相关？ –

画布反应迅速，但问题是图像和字母绘制为每300W的画布N看起来模糊，当我最大化浏览器。所以我希望在下一次绘制画布宽度等于浏览器宽度，但我每次都获得300作为浏览器宽度 –

如何获取宽度画布放在响应HTML页

回答

相关问题