canvas ---1

2023-02-12 21:39:35

Canvas1 (关键词：canvas)

canvas ：就是html5中提供的一个标签，只是用来展示绘图的内容
- canvas 标签的默认宽高：300*150
- - 如果给canvas来设置高度和宽度
  - - 一般情况就是html的width 和 height属性
    - 通过js来设置宽度和高度
    - 不管是通过html的属性（width/height）还是直接通过DOM来设置（width/height ），属性都是在设置canvas画布中的像素点
    - 注意：不要通过css样式属性来设置高度和宽度，因为这里的高度和宽度不是在设置像素点的个数，而是在扩大或者缩小每个像素点的大小

- canvas标签IE9及其以上的浏览器才支持

- 使用canvas基本步骤：
- 1. 获取canvasDOM元素
  2. 获取canvas绘图上下文（一系列工具的集合）
  3. 从上下文中获取到相应的工具（API 或者方法）

// 传入的参数 2d 表示，绘制平面图形

// 如果想要绘制 3d的内容，需要传入： webgl

var ctx = cv.getContext("2d");

// ctx的类型： CanvasRenderingContext2D

- 系统的画图工具：
- 1. canvas画布：白色的空白区域
  2. 上下文：白色的空白区域上部工具栏

- 常用的方法：
- 1. .moveTo（）----把画笔移动到画布中的某个位置去
  2. .lineTo（） ----在起始点和当前函数提供的坐标之间画一条路径
  3. .stroke（） ----描边，真正的将路径绘制在canvas画布上
  4. .fill（） ---- 填充，填充为一个指定的颜色,如果绘制了一个没有闭合图形，会自动闭合
  5. .closePath（） ---闭合路径
    - 闭合路径与自己写的连线的区别：
    - - 闭合路径绘制的两条线衔接处更加平滑
      - 自己写的连线，只是让开始位置跟结束的位置放到一起，这两者绘制出来的接合处是有区别的
  6. .beginPath（）----开启路径
    - 开启路径，只把原来的路径清空了，但是绘制的样式（状态）还会被继承了
    - 如果是开启新路径之后，又设置了样式，那么会把之前的样式覆盖

- 常用的样式：
- 1. strokeStyle 设置描边的颜色
    取值：颜色名称十六进制 rgba
  2. fillStyle 设置填充的颜色
  3. lineWidth 设置线的宽度：如果是奇数的线宽，绘制的时候，会制动加1像素，然后最外面的两个像素颜色会变淡
- 如何让lineWidth的宽度为1
- - （width，height.5）