如何用canvas绘制一个多边形
Canvas是HTML5在HTML4.0的基础上增加的一个绘画标签。通过其提供的坐标定点，在网页中我们可以做动画、绘图，无所不能及。下面就让我们一起来动手吧？例：用canvas绘制一个多边形
工具/材料
dw等代码编辑软件
操作方法
- 01
在网页主体中定义一张画布（大小，颜色等），在HTML5输入JS代码，加载网页，并定义一只画笔，以坐标（500，100）为起始点，到（400，200）的地方划一条斜线：代码如图1
- 02
运行程序，在网页中输出一条斜线，结果如图2
- 03
X轴保持不变（400），Y轴为（300）画一条竖线，代码如图3
- 04
运行程序，结果如图4
- 05
X轴变为（500），Y轴为（４００），添加一条斜线，代码如图５
- 06
运行程序，大家会发现，如图６
- 07
X轴增大（１００），Y轴变为（５００），画一条横线，代码如图７
- 08
运行程序，结果如图８
- 09
在X轴为（７００），Y轴为（300）的地方，划一条斜线，代码如图9
- 10
运行程序，结果如图10
- 11
X轴不变，画一条高度为100的竖线，代码如图11
- 12
运行程序，结果如图12
- 13
在X轴为（6００），Y轴为（100）的地方，画一条长为100的斜线，代码如图13
- 14
运行程序，结果如图14
- 15
关闭多边形（closepath）的路径，运行代码（如图15），怎么样，心动了吗？
- End
- 发表于 2017-10-30 00:00
- 阅读 ( 294 )
- 分类：电脑网络
