随着Html5的迅猛发展,画布也变得越来越重要。下面我就写一个关于在canvas上画出一片星空的简单的代码的示例。
理论基础
- 初始化一个canvas,获得一个用于绘制图形的上下文环境context。并指定为2d方式进行绘图。
- 画一个五角星其实就是找点和连线的过程。根据几何知识,可以使用两个同心圆来方便的求得相应的坐标位置。
- 设置状态,完成五角星的绘制过程。最后应用于整片星空,绘制很多的五角星。
封装好的五角星绘制函数
下面这个绘制的五角星的方法是可以被复用的,注释也写的比较的清楚。
/**
* 画一个五角星的封装的函数
* @param {Object} cxt 提供绘图的上下文的环境
* @param {Object} r 充当绘图时小圆的半径的值
*