canvas基础知识（精简）

基本模板

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
const canvas = ref<HTMLCanvasElement | null>(null)
let ctx = reactive<any>({})
const initContext = () => {
  if (canvas.value?.getContext) {
        ctx = canvas.value?.getContext('2d')
  }
}
onMounted(() => {
      initContext()

      drawArc()
})
</script> 

fillRect(x, y, width, height)绘制一个填充的矩形

strokeRect(x, y, width, height)绘制一个矩形的边框

clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。

stroke()通过线条来绘制图形轮廓。

fill()通过填充路径的内容区域生成实心的图形。括号里带参数代表填充规则："nonzero"或者"evenodd"

clip()将当前正在构建的路径转换为当前的裁剪路径。

save()保存画布 的所有状态

restore()恢复 canvas 状态的

fillText(text, x, y [, maxWidth])在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth])在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

measureText()将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。

beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()闭合路径之后图形绘制命令又重新指向到上下文中。

moveTo(x, y)将笔触移动到指定的坐标 x 以及 y 上。

lineTo(x, y)绘制一条从当前位置到指定 x 以及 y 位置的直线。

setInterval(function, delay)当设定好间隔时间后，function 会定期执行。

setTimeout(function, delay)在设定好的时间之后执行函数

requestAnimationFrame(callback)请求浏览器执行一个特定的函数来更新动画。

rect(x, y, width, height)绘制一个矩形

arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以（x,y）为圆心的以 radius 为半径的圆弧

quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y 为一个控制点，x,y 为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

getLineDash()返回一个包含当前虚线样式，长度为非负偶数的数组。

setLineDash(segments)设置当前虚线样式。

const path2D=new Path2D()返回一个新初始化的 Path2D 对象

createLinearGradient(x1, y1, x2, y2)线性渐变，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient(x1, y1, r1, x2, y2, r2)径向渐变，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

createConicGradient(startAngle, x, y)圆锥渐变,第一个定义渐变开始的角度，后两个参数是（x,y）中心点

gradient.addColorStop(position, color)接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF，rgba(0,0,0,1)，等等）。

createPattern(image, type)实现图案效果，image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

shadowOffsetX = float设定阴影在 X 延伸距离负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowOffsetY = float设定阴影在 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowBlur = float设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor = color标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

drawImage(img, x, y)以（x,y）为原点将img原尺寸加载到画布上。

drawImage(image, x, y, width, height)将img限定画布范围(width, height)加载到画布上。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)后 4 个参数是定义切片的目标显示位置和大小。

translate(x, y)translate方法接受两个参数。*x *是左右偏移量，y 是上下偏移量，如右图所示。

rotate(angle)这个方法只接受一个参数：旋转的角度 (angle)，它是顺时针方向的，以弧度为单位的值。

旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate方法

scale(x, y)scale方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比 1 小，会缩小图形，如果比 1 大会放大图形。默认值为 1，为实际大小。

transform(a, b, c, d, e, f)a (m11)水平方向的缩放，b(m12)竖直方向的倾斜偏移，c(m21)水平方向的倾斜偏移，d(m22)竖直方向的缩放，e(dx)水平方向的移动，f(dy)竖直方向的移动，

setTransform(a, b, c, d, e, f)这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形，然后设置为指定的变形，一步完成。

resetTransform()重置当前变形为单位矩阵，它和调用以下语句是一样的：ctx.setTransform(1, 0, 0, 1, 0, 0)

globalCompositeOperation = type遮盖指定区域，清除画布中的某些部分

source-over前面覆盖后面，两者都显示

destination-out原图被新图覆盖，显示空白

var myImageData = ctx.createImageData(width, height);创建了一个新的具体特定尺寸的 ImageData对象。所有像素被预设为透明黑。

var myImageData = ctx.getImageData(left, top, width, height);返回一个 ImageData对象，它代表了画布区域的对象数据，此画布的四个角落分别表示为 (left, top), (left + width, top), (left, top + height), 以及 (left + width, top + height) 四个点。这些坐标点被设定为画布坐标空间元素。任何在画布以外的元素都会被返回成一个透明黑的 ImageData 对像。

putImageData(myImageData, dx, dy);对场景进行像素数据的写入，dx 和 dy 参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标。

canvas.toDataURL('image/png')创建一个 PNG 图片。

canvas.toDataURL('image/jpeg', quality)创建一个 JPG 图片。你可以有选择地提供从 0 到 1 的品质量，1 表示最好品质，0 基本不被辨析但有比较小的文件大小。

canvas.toBlob(callback, type, encoderOptions)这个创建了一个在画布中的代表图片的 Blob 对像。

isPointInPath()判断路径中是否包含监测点（作为参数传入）。

ctx.isPointInStroke(x, y);返回一个布尔值，检测点(x, y)是否在路径的描边线上

ctx.isPointInStroke(path, x, y);path Path2D 路径，检测点(x, y)是否在路径的描边线上

fillStyle = color设置图形的填充颜色。

strokeStyle = color设置图形轮廓的颜色。

globalAlpha = number设置透明度

lineWidth = value设置线条宽度。

lineCap = type设置线条末端样式。

lineJoin = type设定线条与线条间接合处的样式。

miterLimit = value限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。

lineDashOffset = value设置虚线样式的起始偏移量。

imageSmoothingEnabled = false;控制是否在缩放图像时使用平滑算法默认值为true，即启用平滑缩放

font = value当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。

textAlign = value文本对齐选项。可选的值包括：start, end, left, right or center. 默认值是 start。

textBaseline = value基线对齐选项。可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

direction = value文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。