JavaScript & TypeScript/3.4-canvas.md · Fall/笔记仓库

---
sidebar_position: 54
---

> Create by **fall** on 10 Jun 2022<br/>
> Recently revised in 06 Apr 2023

## canvas

Canvas 的默认大小为 `300px * 150px`（宽 * 高）

如何获取 DOM

```js
// 确保 DOM 中存在如下的标签
// <canvas id="canvas" width="600" height="600"></canvas>
const canvas = document.getElementById('canvas')
const stx = canvas.getContext('2d') // 获取 2d 对象
```

如何绘制矩形

```js
ctx.fillStyle = 'green'; // 填充颜色
ctx.strokeRect(x,y) // 绘制边框，四个参数分别表示填充的起始点 x y，以及宽度，高度
ctx.fillRect(10, 10, 150, 100); // 填充矩形，四个参数分别表示填充的起始点 x y，以及宽度，高度
```

画一个圆形

```js
ctx.translate(300, 300) // 原点偏移方向 x 轴 300，y 轴 300
ctx.beginPath() // 开启路径
ctx.arc(0, 0, 100, 0, 2 * Math.PI) // 起始点 x,y 半径
ctx.closePath() // 关闭路径
ctx.strokeStyle = 'red' // 更改颜色为红色
ctx.stroke() // 画： stroke 意思为轻划
```

### canvas 对象

```js
ctx.beginPath() // 新建一条路径生成之后，绘制命令被指到路径上生成的内容
ctx.closePath() // 闭合路径
ctx.stroke() // 通过线条进行绘制
ctx.fill()  // 通过填充进行绘制
```

保存和提取

```js
// 保存和提取状态，是一个栈，也就是说，只能提取栈中最近的一次保存
// 保存当前状态
ctx.save()
// 提取当前状态
ctx.restore()
```

### drawImage

向 canvas 内画入 image 图片，可选参数类型

```js
// dx, dy 表示插入后在画布中的位置
drawImage(image, dx, dy)
// dWidth, dHeight 表示插入后在画布中的位置
drawImage(image, dx, dy, dWidth, dHeight)
// sx, sy 等表示截取图片源文件的坐标，sWidth, sHeight 表示截取宽高，dx, dy, dWidth, dHeight 表示插入后的位置和宽高
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
```

### toDataURL

将 canvas 作为 DataURL 进行输出

```js
const canvas = document.getElementById('canvas')
const stx = canvas.getContext('2d') // 获取 2d 对象
stx.drawImage() // 将 image 在画布上画出来
const mimeType = 'image/png'
const quality = 0.4
// 将画布上的内容转换为 DataURL
stx.toDataURL(mimeType, quality)
// mimeType：image/png，image/jpeg，image/webp
// quality：0-1，默认压缩质量为 0.92
```

实现将图片进行压缩，

### toBlob

将 canvas 作为 Blob 进行输出，该方法是异步的

```js
const callback =(blob)=>{
  console.log(blob) // 如果未创建成功，为 null
} 
// mimeType 和 quality 和 toDataURL 类似
const mimeType = "image/jpeg"
const quality = 0.3
stx.toBlob(callback,mimeType, quality)
```

## WebGL

Web Graphics Library（是一种 3D 绘图标准）

## 参考文章

| 作者         | 链接                                                         |
| ------------ | ------------------------------------------------------------ |
| MDN官方文档  | https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API  |
| Sunshine_Lin | https://juejin.cn/post/6986785259966857247                   |
| 刘伟C        | [前端图片压缩上传（压缩篇）：可能是最适合小白的前端图片压缩文章了！](https://juejin.cn/post/6844903495703904263) |
|              |                                                              |
|              |                                                              |

Fall/笔记仓库

简介

发行版

贡献者

近期动态

Fall/笔记仓库 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Fall/笔记仓库