Canvas

初始化

1、创建画布并获取画布对象

<canvas width="500" height="500" id="myCanvas"></canvas>

2、获取元素

const canvas = document.getElementById('myCanvas')

3、获取上下文（可以理解为画笔）

const ctx = canvas.getContext('2d')

基础图形

beginPath()

  • 开始一条新的路径，调用此方法后，之前的所有路径会被清空，开始绘制新的路径
  • 通常在绘制图形前调用，确保不会被之前的路径影响

closePath()

  • 用于闭合一条路径，会从当前点画一条直线回到路径开始的地方，形成一个闭合的形状
  • 需要通过连线绘制封闭图形时

beginPath() 和 closePath() 不是要成对出现的，他们的作用有很大的区别

线

  1. 设置线宽
  2. 设置颜色
  3. 把鼠标移动到某个点 (x1, y1)
  4. 绘制到 (x2, y2)
  5. 绘制

可以通过设置 lineCap ，指定每一条线段的末端

折线

  1. 设置线宽
  2. 设置颜色
  3. 把鼠标移动到某个点 (x1, y1)
  4. 绘制到 (x2, y2)
  5. 绘制到 (x3, y3)
  6. ...
  7. 绘制

多边形

  1. 设置线宽
  2. 设置边颜色（配合第 9 步使用）
  3. 设置填充颜色（配合第 10 步使用）
  4. 把鼠标移动到某个点 (x1, y1)
  5. 绘制到 (x2, y2)
  6. 绘制到 (x3, y3)
  7. ...
  8. 闭合路径
  9. 绘制边
  10. 填充图形

矩形

  1. 绘制矩形

rect(x, y, width, height) 方法创建一个矩形路径，其起始点位于 (x, y)，大小由 width 和 height 指定。

  1. 创建一个单独的路径子集，并绘制矩形

strokeRect(x, y, widht, height) 方法绘制一个描边矩形，其起点为 (x, y)，其大小由 width 和 height 指定。

  1. 创建一个单独的路径子集，并填充矩形

fillRect(x, y, widht, height) 方法填充一个矩形，其起点为 (x, y)，其大小由 width 和 height 指定。

弧形（圆形）

  1. arc 绘制弧形

arc() 方法创建一个以坐标 (x, y) 为中心，以 radius 为半径的圆弧。路径从 startAngle 开始，到 endAngle 结束，路径方向由 counterclockwise 参数（可选）决定（默认为顺时针方向 -- false）。

ctx.arc(x, y , r, 起始弧度, 结束弧度, 弧形方向)

矩阵变换

  1. 矩阵变换（具体矩阵公式可以参照 图形学 - 基础 - 矩阵）
setTransform(a, b, c, d, e, f)

变换矩阵的描述：(acebdf001)

  1. 对画布左上角进行平移变换
translate(x轴方向的距离, y轴方向的距离)
  1. 对画布进行缩放变换
scale(x轴缩放倍数， y轴缩放倍数)
  1. 对画布进行旋转变换
rotate(顺时针旋转的弧度)

绘制状态保存和恢复

绘制状态：

  • 当前的变换矩阵
  • 当前的剪切区域（clip）
  • 当前的虚线列表
  • 以下属性的当前值：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、lineDashOffset、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline、direction、imageSmoothingEnabled

使用 save() 方法保存当前状态（只是保存，不会将状态去除），使用 restore() 方法恢复

可以理解成 save() 后的绘制状态可以随心所欲，只要 restore() 就不会影响之前的绘制状态

渐变

线性渐变

createLinearGradient(x0, y0, x1, y1) 方法需要指定四个参数，分别表示渐变线段的起点和终点

渐变坐标是全局的，即相对于当前的坐标空间。当应用于形状时，这些坐标并不是相对于形状本身的坐标。

径向渐变

createRadialGradient(x0, y0, r0, x1, y1, r1) 方法由六个参数指定，三个参数定义渐变的起始圆，另外三个参数定义渐变的结束圆。

渐变坐标是全局的，即相对于当前的坐标空间。当应用于形状时，这些坐标并不是相对于形状本身的坐标。

阴影

  1. 设置阴影颜色

    ctx.shadowColor = string

  2. 设置阴影x轴的偏移方向

    ctx.shadowOffsetX = number

  3. 设置阴影y轴的偏移方向

    ctx.shadowOffsetY = number

  4. 设置模糊的距离

    ctx.shadowBlur = number

  5. 画出上面设置好的图形，并带阴影效果

    ctx.fillRect(100, 100, 100, 100)

文本

  1. 设置文字颜色

    ctx.fillStyle = string

  2. 设置文字的样式

和 css字体描述 相同的字符串

ctx.font = string

  1. 设置文字 和 文字的起始位置

    ctx.fillText(文本: string, x: number, y: number)

  2. 镂空效果

    ctx.strokeText(文本: string, x: number, y: number)

  3. 设置文本的起始点

    • 设置水平位置

      ctx.textAlign = string

    • 设置垂直位置

      ctx.textBaseline = string

    文字居中

    ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('hello world', canvasWidth/2, cnavasHeight/2)

重叠图形的样式方案

  • ctx.globalcompositeOperation = string

destination-out 可以用来做刮刮乐

绘制图片

值说明
dom图片
number绘制图片的起始点的x
number绘制图片的起始点的y
number可选：绘制的宽度
number可选：绘制的高度
number可选：canvas绘制的起始点的x
number可选：canvas绘制的起始点的y
number可选：canvas绘制的宽
number可选：canvas绘制的高

绘制一张完整的图片

绘制一张图片，并截取一部分渲染

导出 Canvas

将canvas的内容抽取成一张图片，base64编码格式

const base64 = canvas.toDataURL()

获取像素点信息

ctx.getImageData(起始点x, 起始点y, 宽, 高)

如何解决canvas高分屏模糊的问题

真实像素中放更大的画布，画布会按像素宽高比压缩放入dom中，得到更细致的画布

<style>
	canvas{
       width:200px;
       height:200px;
    }
</style>
<canvas width="500" height="500"></canvas>

与svg的区别

  1. svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修 改。 canvas 输出的是⼀整幅画布

  2. svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽ canvas 输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮

最近更新：:
Contributors: kingmusi