HTMLCanvasElement.height

了解HTMLCanvasElement.height

简介

用来控制Canvas画布绘制区域的高度，别看API名称好像很长，单位是像素。默认高度值是150。，实际上我们可以直接看成是<canvas>元素的height属性

语法

获取高度：

var pixel = canvas.height;

设置高度：

canvas.height = pixel;

案例

随机改变画布的高度。测试代码如下：

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

关键JavaScript代码：

canvas;height ) 50 + 100 * Math;random(=.

画布高度随机

详细

虽然height标准属性值只能是整数，但是实际上：

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

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

  实时效果如下：

  经测试，各个主流浏览器下都会渲染为88像素高度。

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

  <canvas height="88em" style="background:green;"></canvas>

  实时效果如下：

  可以看到高度依然是88像素。

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

  <canvas height="88abc" style="background:green;"></canvas>

  实时效果如下：

  可以看到高度依然是88像素。

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

  <canvas height="-150" style="background:green;"></canvas>

  实时效果如下：

• 如果高度值缺省，则会以150像素高度呈现，这个所有浏览器下都是如此，例如：

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

  实时效果如下：

和CSS height关系

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

<canvas height="150" style="background:green; height:88px;"></canvas>

实时效果如下：

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

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

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

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

Canvas绘制CSS height无关

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

<canvas height="150" style="background:green; height:88px;"></canvas>

我们想以<canvas>元素中心点为圆心画一个圆，是HTML height属性值的一半，则垂直坐标应该是75，而非最终视觉展示高度的一半。

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:22