canvas ---1

Posted 2020-08-15

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）