[JS] canvas 详解

[JS] canvas 详解
创建 canvas
```
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    body {
      margin: 0;
    }
  style>
head>
<body>
  <canvas width="500" height="500">You browser doesn't support canvascanvas>
  <script>
    const cvs = document.querySelector('canvas')
    const context = cvs.getContext('2d')
  script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
```
可以通过 width 和 height 设置 canvas 的宽高（不带 px 单位），然后在 js 代码中获取 canvas 元素，调用 canvas.getContext('2d') 获取 2d 上下文。

简单绘图

可以通过 canvas context 的如下属性对图形的填充和描边进行设置：
- context.fillStyle 图形的填充颜色，可以是十六进制颜色、rgb、颜色单词等
- context.strokeStyle 描边颜色，可取值同上
- context.lineWidth 线条宽度，不带 px 单位
- context.fillRect(x, y, width, height) 绘画指定颜色填充的矩形
- context.strokeRect(x, y, width, height) 描边指定颜色的矩形
- context.clearRect(x, y, width, height) 清除指定区域的矩形，可以用来初始化画布、挖空图形
直接绘制矩形
```
context.fillStyle = 'red'
context.strokeStyle = 'blue'
// 在 (0, 0) 处绘制一个宽高为 100px 的正方形
context.fillRect(0, 0, 100, 100)
// 在 (200, 200) 处描边一个宽高为 100px 的正方形
context.strokeRect(200, 200, 100, 100)
// 清除所有图形（初始化画布）
context.clearRect(0, 0, 500, 500)
1
2
3
4
5
6
7
8
```
绘制路径

以下所有方法调用前，都必须使用 context.beginPath() 方法来声明开始绘制路径。
- context.arc(x, y, radius, startAngle, endAngle, counterclockwise) 以 (x, y) 为圆心，radius 为半径，绘制指定起始角度到结束角度的弧线，counterclockwise 表示是否以逆时针计算起始角和结束角。可以设置 startAngle=0，endAngle=2 * Math.PI 绘制一个圆形。
- context.moveTo(x, y) 将光标移动到 (x, y)
- context.lineTo(x, y) 从当前光标起始位置绘制到 (x, y) 的线条
- context.rect(x, y, width, height) 以 (x, y) 为起点创建一个矩形路径，和 fillRect 的区别是这个方法不会绘制实际的图形
- arcTo(x1, y1, x2, y2, radius)以给定半径 radius，经由(x1, y1)绘制一条从上一点
  到(x2, y2)的弧线
创建路径之后，可以使用 closePath() 方法绘制一条返回起点的线。如果路径已经完成，则既可以指定 fillStyle 属性并调用 fill() 方法来填充路径，也可以指定 strokeStyle 属性并调用 stroke() 方法来描画路径，还可以调用 clip() 方法基于已有路径创建一个新剪切区域。

绘制文本

绘制文本主要用下面两个方法：
- fillText
- strokeText
这两个方法的参数都是 str、x、y、maxWidth，表示要绘制的字符串的 x、y 坐标和最大宽度。

此外，最终绘制的文本还和 context 设置的文本格式有关：
```
// 字体
context.font = "bold 14px Arial"; 
// 在坐标中的对齐方式，如下是正常的对齐方式
context.textAlign = "center"; 
context.textBaseline = "middle"; 
1
2
3
4
5
```
变换、阴影、渐变

不想记了，见 MDN
相关阅读:
过滤器知识点总结
 littlevgl之cb 复选框控件
 检查两个数组在维度,形状以及元素值上是否均等价 numpy.array_equiv()
艾美捷EndoGrade卵清蛋白重组示例说明
 Unity SKFramework框架（二十二）、Runtime Console 运行时调试工具
 如何配置Log4j以便将日志信息输出到文件，并指定日志文件的格式？请解释Log4j中的PatternLayout，并给出一个常用的日志格式模式。
领英-如何合并或注销重复领英帐号及利用领英高效开发客户技巧
 Texas Instruments 在 GitHub 的官方主页
 java毕业设计毕业生就业去向登记管理系统mybatis+源码+调试部署+系统+数据库+lw
GraphQL基础知识与Spring for GraphQL使用教程
原文地址：https://blog.csdn.net/qq_39559879/article/details/126927575

创建 canvas

简单绘图

直接绘制矩形

绘制路径

绘制文本

变换、阴影、渐变