如何在网页绘制几何图形?

在我们日常浏览网页时,大家会看到各式各样的图片,这些图片大多数是经过图形图像软件处理加工过的,除此之外,HTML5也给我们专门提供了一个绘图和制作动画的功能标签(canvas),下面就让我们一起动手吧!例:绘制一个几何图形

操作方法

  • 01

    首先<body>标签里面嵌入一个绘画标签(canvas),取一个ID名,并为画布设置高度、宽度和背景色,如图1

  • 02

    运行程序,结果如图2

  • 03

    通过JS内部样式嵌入代码并加载,建一个2D图片如图3

  • 04

    在圆心为(250,250)半径为200,起点为0,终点为180(PI),顺时针画一条弥线,如图4

  • 05

    运行程序,如图5

  • 06

    用关闭路径属性( closePath)连接扇形两连的端点,如图6

  • 07

    运行程序,如图7

  • 08

    设置线性颜色为红色,精细为2,如图8

  • 09

    运行程序,如图9

(0)

相关推荐

  • UG怎么使用束绘功能绘制几何图形?

    ug中想要绘制类似花朵的图形,该怎么回执几何图形呢?下面我们就来看看详细的教程. 1.新建建模文件,选用在任务环境中绘制草图. 2.绘出已知直径的圆:300. 3.用三点画出一段圆弧,从图中可以看出, ...

  • iPad自带的备忘录怎么绘制几何图形

    iPad里的备忘录很多人都不知道,其实它还可以用来绘制简单的几何图形. 1.打开你iPad里的备忘录,你会看到上面有一个曲线的标志,见圆圈.然后点击它就可以进入绘制图形界面了. 2.绘制图形界面里包含 ...

  • UG建模练习---草图约束绘制几何图形

    在UG的草图中,有着十分方便的约束系统,可以让我们能快速的完成草图.已知最大外圆直径为:300:没有其它数据,如何来绘制呢? 操作方法 01 新建建模文件,选用在任务环境中绘制草图. 02 绘出已知直 ...

  • AE中怎么绘制各种形状的几何图形?

    ae中想要画一些图形,该怎么画呢?下面我们就来看看ae绘制几何图形的教程. 1.打开After Effects CS6,新建一个合成Comp1. 2.首先我们先来画复杂些的shape图形.选择多边形工 ...

  • word怎么绘制正方形正圆形等图层?

    我们平时出数学试卷时经常在word画几何图形,比如长方形,三角形等,如果要求画的图形是正方形和正圆,就不太容易画出来,今天小编就说说画这种图形的技巧,希望能帮到大家. 1.如图,我们在编辑数学试卷时, ...

  • 几何画板怎么使用度量直线方程绘制函数图像?

    几何画板不仅仅可以用来绘制几何图形,我们还常常利用方程表达式来绘制函数图象,事实上也可以利用几何画板得到方程的表达式.下面就以直线为例,介绍利用几何画板得到直线方程的方法. 1.下载安装几何画板5.0 ...

  • Authorware怎么绘制矩形?

    Authorware绘制图形很方便,想要绘制几何图形,比如矩形,该怎么绘制呢?下面我们就来看看详细的教程. 1.首先打开Authorware,进入它的创作界面: 2.在左边的图标中找到显示图标: 3. ...

  • 如何在flash中绘制出正方形及其内接圆

    有的小伙伴在使用flash软件绘制几何图形时,想要绘制出正方形及其内接圆,但是却不知道如何绘制,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右击打开flash软件.2. 第二步,来到 ...

  • 怎么用word、PPT形状工具绘制自定义图形

    word.PPT软件当中有许多供大家选择的几何图形,但实际工作中,可能还需要些自定义的图形,这里就教大家如何操作,一起来吧! 操作方法 01 第一步:先以word 2007版软件为例,如下图,找到几何 ...