All Articles

canvas 元素的宽高

设置一个元素的尺寸,推荐的做法是通过css设置其 widthheight。不过今天我们说说一个特例:canvas。本文内容比较简单,我不做示例。

常见的设置 canvas 元素尺寸有两种方法。

  1. canvas 元素设置属性,例如:
<canvas width="400" height="400">
</canvas>
  1. canvas 对象设置属性,例如:
var canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;

不过如果你采用css来控制:

canvas {
    width:400px;
    height:400px;
}

则会发现 canvas 画出的图形变形了。为什么会这样?原来不同于其他元素,你只能通过前两种方式设置 canvas 的尺寸,因为 canvas 是基于像素点渲染的,它的渲染可以说完全依赖于 imageData,如果不通过 canvas 而直接改变 canvas 尺寸,那么 imageData 里的数据将完全无效。那么为什么用 css 设置宽高会发生变形呢?首先我们需要知道,通常一个未设置尺寸的 canvas 元素是有一个默认宽高的,为 300px × 150px,如果 css 中没有将宽高设置成 canvas 元素的宽高,那么这个它会在原有尺寸的基础上,拉伸到 css 中设置的尺寸。从这点上看,跟图片的宽高处理是一样的(只不过图片通过属性或 css 设置尺寸基本上效果是一样的)。

当然,通过 css 设置 canvas 的尺寸也并不一定是无用的,有害的。比如在画椭圆的时候,是不是又多了一种简单的途径?

发布于2014年12月23日

有趣的灵魂终会相遇
@周骅