Html Canvas:宽度/高度属性和宽度/高度样式之间的差异

时间:2016-02-05 08:50:15

标签: javascript html css html5 canvas

我在画布上看到了各种答案调整大小但无法理解我面临的问题。以下是在我的Web应用程序上呈现的canvas元素。

Before Rendering: 

    <canvas id="g_5" resize></canvas>

After Rendering:

     <canvas id="g_5"  resize width="1076" height="306" style="-webkit-user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1148.38px; height: 300px;"></canvas>  

我按如下方式设置画布的高度和宽度:

        var canvas = document.getElementById(canvasId);
        var context = canvas.getContext('2d');
        var width = <someWidth>;  //=1076 in this case
        var height = <someHeight>; //=306 in this case
        canvas.width = width;
        canvas.height = height;

执行此操作后,样式中的宽度/高度取代属性width / height,因此canvas使用样式的高度/宽度。

我的问题是:

  1. 为什么有两种不同的宽度/高度?
  2. 如何将它们设置为具有相同的值
  3. 如果我从canvas元素中删除resize属性,则画布大小保持默认大小。

1 个答案:

答案 0 :(得分:1)

  1. 首先应用html属性中的宽度/高度设置,直到加载css为止。
  2. 加载css后,将忽略width / height属性并使用其样式定义。
  3. 使用javascript调整大小代码后,您将在该事件中调整画布大小。