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 【如何用canvas绘制一个多边形】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
文章插图
推荐阅读
- 如何在CAD看图软件中画直线
- 如何利用美图秀秀对图片进行马赛克处理？
- 如何在CAD看图软件中画出一个好看的椭圆
- 如何解决word文档打开总是显示修订？
- excel表格如何排序 由大到小按顺序排列
- 如何使用PS添飞剑到图像中
- EXECL2010数据条如何在表格里展示
- 如何捉老鼠
- Word文档如何导入或导出样式
- 王者荣耀如何取消健康系统