如何用canvas绘制一个多边形

发布网友发布时间：2023-10-17 01:33

共1个回答

热心网友时间：2024-12-01 12:56

Canvas是HTML5在HTML4.0的基础上增加的一个绘画标签。通过其提供的坐标定点，在网页中我们可以做动画、绘图，无所不能及。下面就让我们一起来动手吧？例：用canvas绘制一个多边形

在网页主体中定义一张画布（大小，颜色等），在HTML5输入JS代码，加载网页，并定义一只画笔，以坐标（500，100）为起始点，到（400，200）的地方划一条斜线：代码如图1

运行程序，在网页中输出一条斜线，结果如图2

X轴保持不变（400），Y轴为（300）画一条竖线，代码如图3

运行程序，结果如图4

X轴变为（500），Y轴为（400），添加一条斜线，代码如图5

运行程序，大家会发现，如图6

X轴增大（100），Y轴变为（500），画一条横线，代码如图7

运行程序，结果如图8

在X轴为（700），Y轴为（300）的地方，划一条斜线，代码如图9

运行程序，结果如图10

X轴不变，画一条高度为100的竖线，代码如图11

运行程序，结果如图12

在X轴为（600），Y轴为（100）的地方，画一条长为100的斜线，代码如图13

运行程序，结果如图14

关闭多边形（closepath）的路径，运行代码（如图15），怎么样，心动了吗？