html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

在Canvas的世界里，每一笔绘制的width和height都代表着画板的实际尺寸。当画布默认设置时，它的width为300px，height为150px，就像一张待绘的空白画布。在CSS样式中的widht和height，却代表着元素在网页上的显示尺寸。

让我们以绘制一个对角线为例，来深入理解这一过程。

以下是HTML代码：

```html

```

在这段代码中，我们在HTML的body部分创建了一个canvas元素，并设置了其width为200px，这是canvas的实际画板大小。但在style属性中，我们设定了canvas的显示尺寸为px宽和200px高。这意味着，虽然画板的实际尺寸是200200像素的正方形，但在网页上显示时，它会被拉伸到一个像素宽的长方形区域。

当我们绘制从(0, 200)到(200, 0)的对角线时，这条线在画板上是从左下角到右上角，而在显示时，这条线依然保持同样的角度和方向，适应了在网页上的长方形显示区域。这就是Canvas的魅力所在，无论画板实际尺寸如何，画出的图形总是按照我们指定的坐标和尺寸进行展示。