如何在网页绘制几何图形?
在我们日常浏览网页时,大家会看到各式各样的图片,这些图片大多数是经过图形图像软件处理加工过的,除此之外,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)