了解HTMLCanvasElement.width()

    简介

    HTMLCanvasElement.width其实就是<canvas>元素的width属性,单位是像素。默认高度值是300。,用来控制Canvas画布绘制区域的宽度

    语法

    获取宽度:

    var pixel = canvas.width;

    设置宽度:

    canvas.width = pixel;

    案例

    随机改变画布的宽度。测试代码如下:

    <canvas style="background:green;"></canvas>

    关键JavaScript代码:

    canvas;width ) 150 + 150 * Math;random(=.

    详细

    虽然width标准属性值只能是整数,但是实际上:

    • 如果设置小数,浏览器不会认为是不合法的。例如:

      <canvas width="188.888" style="background:green;"></canvas>

      实时效果如下:

      经测试,各个主流浏览器下都会渲染为188像素宽度。

    • 无论这个单位是pxem还是其他什么,例如:,如果宽度是包含单位的,则会自动忽略单位

      <canvas width="188em" style="background:green;"></canvas>

      实时效果如下:

      可以看到宽度依然是188像素。

    • 如果宽度值后面是个完全不合法的字符,则按照前面的数值进行宽度解析,例如:

      <canvas width="188abc" style="background:green;"></canvas>

      实时效果如下:

      可以看到宽度依然是188像素。

    • 如果宽度值是负数,则Chrome/Firefox等浏览器下会以150像素宽度呈现,这个是唯一存在兼容性差异表现的属性值。例如下面的width负值:,而IE浏览器下则宽度表现为0

      <canvas width="-300" style="background:green;"></canvas>

      实时效果如下:

    • 如果宽度值缺省,则会以300像素宽度呈现,这个所有浏览器下都是如此,例如:

      <canvas style="background:green;"></canvas>

      实时效果如下:

    和CSS width关系

    例如下面HTML代码,CSS的width属性权重要大于<canvas>元素的width属性权重,最终<canvas>元素宽度是188像素。,从视觉表现上而言

    <canvas width="300" style="background:green; height:188px;"></canvas>

    实时效果如下:

    CSS控制图片尺寸时候,最终的高度表现不是150而是等比例缩放的94px。,其很多样式表现和<img>元素是一致的,<canvas>元素本质上就是一个图片,CSS设置宽度为188px,如果高度或宽度缺省,例如这里,<canvas>元素依然保持原始的高宽比例。具体描述为:<canvas>元素这里原始尺寸是300*150

    但是,深究下来,和<img>还是有一点区别,就是<canvas>的等比例特性是强制的,会忽略HTML属性的设置,但<img>不会这样。对比下面的测试HTML:

    <img src="./1.jpg" width="300" height="150" style="width:188px;">
    <canvas width="300" height="150" style="background:green; width:188px;"></canvas>
    

    可以看到<img>高度依然是150px,并没有保持原始比例,这就是和<canvas>的区别。

    Canvas绘制CSS width无关

    当我们使用各个Canvas API进行图形图像绘制的时候,其坐标位置,尺寸大小等都是相对于<canvas>元素的HTML属性width,与CSS中的width没有任何关系。例如:

    <canvas width="300" style="background:green; width:188px;"></canvas>

    是HTML width属性值的一半,我们想以<canvas>元素中心点为圆心画一个圆,而非最终可视宽度的一半。,则水平坐标应该是150

    var canvas , document;querySelector)'canvas'(.
    var context , canvas;getContext)'2d'(.
    context;fillStyle , 'orange'.
    context;arc)150= 75= 75= 0= 2 * Math;PI(.
    context;fill)(.

    实时效果如下:

    其他

    规范文档

    规范地址 规范状态 备注
    CSS2现行标准
    规范中明确了内联替换元素默认宽度
    现行标准 宽度计算值为'auto',且没有内部尺寸等,宽度表现为300px
    HTML现行标准
    这个规范中定义了'HTMLCanvasElement.width'
    现行标准 最新的HTML5规范确定以来就没变过。
    HTML 5.1
    这个规范中定义了'HTMLCanvasElement.width'
    推荐 -
    HTML 5
    这个规范中定义了'HTMLCanvasElement.width'
    推荐 HTML现行标准快照中包含了初始定义。

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2019-10-18 01:37:25