第3章使用canvas元素绘制图形、图像与动画.docVIP

第3章 使用canvas元素绘制图形、图像与动画 本章小结 在HTML 5中，canvas元素是一个非常重要的元素，用于完成网页中各种图形、图像与动画的绘制工作。本章通过几个利用canvas元素在网页上进行图形、图像与动画绘制的案例，来阐述如何利用该元素来完成网页上各种图形、图像与动画的绘制工作。 3.1　案例5：使用canvas元素绘制美丽的花朵 3.1.1　案例概述 在数学中，有三叶玫瑰线（方程为=sin(3)和四叶玫瑰线（方程为=sin(2)）等曲线，这些曲线的极坐标方程很简单，基本形式均为=sin(n))，即任意一点的极半径是角度的函数，其直角坐标方程为：x=sin(n)cos()，x=sin(n)sin()。 在程序中控制角度，使其从0变化到2，描出极半径所对应的点，就可以绘制出非常漂亮的玫瑰线。当然，n值不同，绘制出的玫瑰线的形状也不相同。 另外，将方程稍作变化，还可以绘制出许多其他有花朵效果的漂亮曲线。本节将向读者介绍如何使用HTML 5中的canvas元素的图形绘制功能，在网页中绘制出漂亮的曲线，根据这些曲线的视觉效果，分别将其称为蓬莱菊、令箭荷花与大丽花。 3.1.2　页面显示效果 首先来看一下案例页面在浏览器中的显示效果，该页面在打开时的显示效果如图3-1所示。 （点击查看大图）图3-1　页面打开时的效果 不改变下拉框中的选项，直接用鼠标单击绘