请向下滑动

创建画布

创建一个任意大小的画布

使用createCanvas来创建画布。


基本:创造画布

使用createCanvas来创建画布。

比如说,输入createCanvas(300,150);会创建一个长为300、宽为150的画布。

在画布中,包括点与线、所有的图形都可以在上面描画。

图1 创建一个画布。

例题:尝试创造一个画布

⇨ 尝试运行例题7

运行例题7后会画出一个圆。在一个长为300、宽为150的画布上画出这个圆吧。


第一步:创造一个画布

创建一个长为300、高为150的画布的代码为createCanvas(300,150);

图2 创建一个长为300、高为150的画布。

要注意代码的顺序。要在createCanvas代码之后再写ellipse代码。

编程写代码时的顺序与实际绘画是一样的。先要创建画布(createCanvas)才可以在上面画圆(ellipse)。


第二步:完成描画

⇨ 尝试运行例题7-2

运行例题7-2后,在一个长为300、宽为150的一个画布上一个圆会被描画出来。

我们之所以会看不到圆的下半部分,是因为圆的下半部分被画在了画布外面。

图4 图中是长为300、宽为150的画布(图中斜线填充部分)。圆的下半部分由于在画布外所以无法显示。

练习:尝试创造一个画布吧

⇨ 运行练习7-0

运行练习7-0之后,会画出五个圆。

把这些圆画在一个长为100、宽为100的画布上吧。


创建画布

⇨ 在练习7-1中编程吧

创造一个长为100、宽为100的画布时,我们会输入createCanvas(100,100);

图5 创建一个长为100、宽为100的画布。

在练习7-1中创建一个如图5所示大小的画布。


总结

在编程中我们使用createCanvas来创建画布。比如,要创建一个长为300、宽为150的画布的代码为createCanvas(300,150);