HTMLCanvasElement.width()

了解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像素宽度。

• 无论这个单位是px，em还是其他什么，例如：，如果宽度是包含单位的，则会自动忽略单位

  <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)(.

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:37:25