H5如何在网页中绘制三角形

H5是目前比较火的编程工具之一,功能十分强大,深受编程人员的喜爱。对于初学者来说,利用H5绘制图形是必须经历的学习阶段。例:如用H5绘制一个三角形。具体方法如下:

操作方法

  • 01

    首先,我们得在网页主体<body>标签里,定义一张画布,可以随便定义画布的大小,和背景颜色等,如图1

  • 02

    在<head>头部输入JS代码,通过windows方法加载到网页中去,并定义一只“2D”画笔,代码如图2

  • 03

    运行程序,大家可以看到,该我们定义的画布大小,颜色等,如图3

  • 04

    在画布起始点(50,50)定义一个起始点(即从X轴、Y轴什么地方开始做图),代码如图4

  • 05

    从起始点(50,50)到X轴(100)、y轴(200)画一条斜线,代码如图5

  • 06

    通过storke输出语句在网页中输出程序,这时个我们就可以在网页中看到一条斜线:如图6

  • 07

    在Y 轴上找一条长100PX直线,Y轴的长度保持不变(200),x 轴变为200PX,代码如图7

  • 08

    运行程序,结果如图8

  • 09

    通过closePath合并三角形的路径,代码如图9

  • 10

    运行程序,这时个一个完整的三角形就做成了,结果如图10

(0)

相关推荐

  • 几何画板中怎么绘制三角形内切圆和外接圆?

    作为专业的几何绘图工具,几何画板的绘图功能让其它几何绘图工具望尘莫及,它可以完全取代数学中的三角尺和圆规,用来帮助老师代替在黑板上作图,下面就一起来学习用几何画板画三角形内切圆和外接圆的技巧. 一.画 ...

  • 电脑AI2019软件中圆角三角形如何绘制

    AI2019软件是我们现在经常在电脑上使用的绘图软件之一,接下来小编就教大家怎样在这个软件中绘制圆角三角形.具体如下:1. 首先我们打开电脑进入到桌面,然后找到AI图标点击打开.进入到软件界面之后,我 ...

  • 在word文档中绘制一个漂亮的卡通杯子

    可以在word文档中画出漂亮的杯子,如图中的效果.如何做到?详细操作请往下看. 步骤 1.新建word文档: 在文档绘图工具栏中点“圆柱形”图标: 在文档上画出图形,并把图形调整成如图B的形状大小: ...

  • 在word文档中绘制一个楼梯效果

    用word可以画出如图中的楼梯效果.如何做到?详细操作步骤请往下看. 步骤 1.新建文档: 在文档的绘图工具栏中点“矩形”图标: 在文档上画出图形,并调整图形的大小: 2.双击矩形,弹出的操作框: 在 ...

  • PS怎么绘制三角形并将边框线设为虚线

    PS是现在十分常用的一款图片编辑软件,有些新用户不知道PS怎么绘制三角形并将边框线设为虚线,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的PS软件,根据下图所示,点击 ...

  • 已知三角形三条边长怎么用AutoCAD绘制三角形?

    已知三角形三边长度怎样用AutoCAD绘制三角形?今天我们详细讲解一下. 操作方法 01 我们举例说明已经三角形三条边长为4,5,6,首先我们绘制任意一条边,我们这个绘制三角形边长为4的边. 02 打 ...

  • ps路径终极教程Ⅶ:制作实例:网页中的应用(一)

    现在我们已经学会了用钢笔来勾画任意的路径形状了.但很多时候并不需要完全从无到有的来绘制一条新路径,Photoshop提供了一些基本的路径形状,我们可以在这些基本路径的基础上加以修改形成需要的形状,这样 ...

  • 如何用JS代码在网页中输出杨辉三角

    在网页中,除了上传图片,文字,声息等信息,更多的时候是上我们自己去编写一个算法,来实现某项特定的功能和输出.下面我们就以杨辉三角为例:要在网页中输出一个杨辉三角,首先要知道杨辉三角的定义:它是一种二项 ...

  • IE有效避免恶意网页中恶意代码的攻击

    恶意网页成了宽带的最大威胁之一。以前使涌Modem,因为打开网页的速度慢,在完全打开前关闭恶意网页还有避免中招的可能性。现在宽带的速度这么快,所以很容易就被恶意网页攻击。 一般恶意网页都是因为加入了用 ...