H5基础（画布）

最新推荐文章于 2024-07-26 20:46:33 发布

美景惠子

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量386

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2201_75624032/article/details/128378351

版权

Gu.:
今天主要讲了canvas绘图，还有svg可伸缩式矢量图形

实现canvas绘图主要分为：

1.创建 HTML标签

```html
<canvas id="cvs"></canvas>
```

可以为其添加 width height属性设置画布的宽度和高度

2.获取画布上下文

```javascript
const cvs = document.querySelector('#cvs')
const ctx = cvs.getContext('2d')
```

3.使用ctx可理解为画笔，来绘制各个图形

```javascript
ctx.strokeStyle = "yellow";
ctx.lineWidth = 5
ctx.lineCap = 'round'
ctx.moveTo(10,100)
ctx.lineTo(30,10)
ctx.lineTo(50,100)
ctx.lineTo(70,10)
ctx.lineTo(90,100)
ctx.stroke()
```

strokeStyle:设置画线颜色

lineWidth: 设置线条的宽度

lineCap: 设置端点的形状

moveTo: 移动画笔到某一处

lineTo: 设置线条的端点所处位置

stroke() :用来画线

fill(): 用来填充区域

fillStyle: 用来设置填充颜色，可以16进制也可以直接写英文名称

beginPath(): 重置路径通常用来设置两个不一样样式的形状

closePath(): 闭合路径通常用来闭合一些形状

rect(): 设置矩形参数1：x 参数2： y 参数3： width 参数4： height

arc(): 设置圆参数1: 圆心x 参数2：圆心 y 参数3：半径参数4：起始角度参数5：结束角度 360 * Math.PI / 180

ellipse(): 设置椭圆参数：圆心 x,y 半径x,y 旋转角度，起始角度，结束角度

ctx.ellipse(300,500,100,50,0,0,360 * Math.PI / 180)

font: 设置字体样式

fillText('xxx',0,0) 参数：文本，文本x坐标与文本y坐标

createLinearGradient(200,0,200,100):设置渐变

```javascript
// 设置渐变
ctx.beginPath()
var gra = ctx.createLinearGradient(200,0,200,100)
gra.addColorStop(0,'red')
gra.addColorStop(1,'green')
ctx.fillStyle = gra
ctx.fillRect(200,0,200,100)
```

svg方面：

```html
<svg width="500" height="500">
<rect x='100' y='100' width='150' height='150' fill='red' stroke='green' stroke-width='2'> </rect>
<circle cx='150' cy='150' r='50'></circle>
<ellipse cx='150' cy='200' rx='100' ry='50'></ellipse>
</svg>
```

### 2.个人感悟

今天主要讲了关于 H5相关的一些知识绘图以及svg ，学习到了很多没有用过的绘图方法，收获甚多。