第一章 基础知识

    使用CSS来设置canvas元素的大小，与直接设置属性相比，其差别是基于这样一个事实的：canvas元素实际上有两套尺寸。一个是元素本身的大小，还有一个是元素绘图表面（drawing surface）的大小。

    当设置元素的width与height属性时，实际上是同时修改了该元素本身的大小与元素绘图表面的大小。然而，如果是通过CSS来设定canvas元素的大小，那么只会改变元素本身的大小，而不会影响到绘图表面。在默认情况下，canvas元素与其绘图表面，都是300像素宽、150像素高。程序清单1-3的代码，使用CSS来将canvas元素的大小设置成600像素宽、300像素高，然而，绘图表面的大小依然没有改变，还是默认的300×150像素。

    这时，有趣的事情就发生了。当canvas元素的大小不符合其绘图表面的大小时，浏览器就会对绘图表面进行缩放，使其符合元素的大小。图1-3演示了这种效果。

图1-3　顶部的图中，元素与坐标系统均为600×300像素，底部的图中，元素是600×300像素，坐标系统是300×150像素

    图1-3顶部所显示的应用程序就是我们在上一节中讨论的那个。它通过修改width与height属性来设置canvas元素的大小，这样的话，元素自身与绘图表面的大小都会被设置成600×300像素。

    图1-3下方的那个应用程序是范例代码1.3中HTML代码的运行效果。这个程序与上一节中所讲的那个程序很相似，不过它是通过CSS来修改canvas元素大小的（此外，该程序运行窗口的标题栏也和上一个程序不同）。

    由于图1-3下方的这个程序是通过CSS来修改canvas元素的大小，而不是通过width与height属性，所以，浏览器会将绘图表面从300×150像素拉伸到600×300像素。

    警告：浏览器可能会自动缩放Canvas

    通过width与height属性而非CSS来修改canvas元素的大小，这是个好办法。如果使用CSS来修改元素的大小，同时又没有指定canvas元素的width与height属性，那么，当元素大小与canvas的绘图表面大小不相符时，浏览器会缩放后者，使之符合前者的大小。这样的话，很可能会导致奇怪的、无用的效果。

    1.1.2　canvas元素的API

    canvas元素并未提供很多API，实际上，它只提供了两个属性与三个方法，分别概括于表1-1与表1-2之中。

表1-1　canvas元素的属性 

表1-2　canvas元素的方法