canvas

// 不建议在CSS中设置，CSS中设的是canvas的样式，不是其大小
<canvas id="canvas" width="600" height="400"></canvas>
// 获取画布元素
  let myCanvas = document.getElementById("canvas")
// 获取上下文绘制工具箱，暂时没有'3d'
  let ctx = myCanvas.getContext('2d')
// 获取画布宽度和高度
ctx.canvas.width
ctx.canvas.height

// 移动画笔
ctx.moveTo(100, 100)

// 绘制直线(轨迹，路径)API
ctx.lineTo(200, 100)

// 描边
ctx.stroke();

关于线条的问题，默认的宽度是多少?(1px)默认的颜色是什么(黑色)？
产生的原因？解决方案？电脑最小识别单位为1px，对齐的点是线的中心位置，上或下移动0.5px 即可;

// 设置线条颜色,设置的所有线条
ctx.strokeStyle = 'blue'

// 设置线条宽度，设置的所有线条
ctx.lineWidth = 10

// 开启新路径，可以解决样式覆盖问题
ctx.beginPath()

绘制三角形（用三条直线画三角形）

 // 填充(默认黑色)
ctx.fill()
ctx.fillstyle = 'red' // (填充其他颜色)

// 当线条宽度足够宽时，起始点和lineTo的结束点无法完全闭合，会缺角，使用canvas的自动闭合， 可以解决此问题
ctx.closePath()

绘制一个镂空的正方形(用四条直线画正方形)
画的时候方向相反，填充外层的，即非零环绕规则(从需要被填充的区域拉一条线，顺时为+1，逆时为-1，相加非零填充)
// 线的渐变色
可以利用线是由点构成来绘制，加上for 循环即可实现

 // 线条相关API(和线相关的属性和方法)
lineWidth  (线宽，默认1px) 
lineCap  (线末端类型：默认butt， round, square)
lineJoin  (相交线的拐点， 默认miter, round, bevel)
strokeStyle  (线的颜色)
 fillStyle  (填充颜色)
setLineDash([5, 10, 15])  (设置虚线)(参数：array(实，虚...))
getLineDash()  (获取虚线宽度集合,获取的是不重复的那一段排列方式)
lineDashOffset  (设置虚线偏移量（负值向右偏移）)

矩形绘制

rect(x,y,w,h)  没有独立路径（起点坐标（x,y）,宽度，高度）
strokeRect(x,y,w,h)  描边矩形，有独立路径，不影响别的绘制（有独立路径，相当于默认开启beginPath()）
fillRect(x,y,w,h)  填充矩形，有独立路径，不影响别的绘制
clearRect(x,y,w,h)  擦除矩形区域
// 线性渐变，通过两个点的坐标可以控制渐变方向,创建 一个渐变方案
// x0,y0起始点，x1,y1结束点(确定的不仅有长度，还有方向)
let linearGradient = ctx.createLinearGradient(x0, y0, x1, y1);
linearGradient.addColorStop(0, 'pink')
linearGradient.addColorStop(0.5, 'red')
linearGradient.addColorStop(0, 'blue')
// 使用渐变方案
fillStyle = linearGradient

圆弧绘制

arc(x, y, r ,startAngle, endAngle)
x  圆心横坐标
y  圆心纵坐标
r  半径
startAngle  开始角度（单位弧度）
endAngle  结束角度（单位弧度）
direction  方向（默认顺时针，false）

文本绘制

// text要绘制的文本， // x,y文本绘制的坐标（文本左下角）// maxWidth（文本最大宽度，可选参数）
font = '尺寸，微软雅黑'（先设大小，再设字体）
strokeText('文本', x, y ,maxWidth)
fillText(text, x, y, maxWidth)
// textAlign文本水平对齐方式，相对绘制坐标来说
left
center
right
start(默认)
end
// direction属性css(rtl, ltr) start 和end 与此相关
如果是ltr, start 和left表现一致
如果是rtl, start 和right表现一致
// textBaseline设置基线（垂直对齐方式）
top  文本的基线处于文本的正上方，并且有一段距离
middle  文本的基线处于文本的正中间
bottom  文本的基线处于文本的正下方，并且有一段距离
hanging  文本的基线处于文本的正上方，并且和文本粘合
alphabetic  默认值，文本的基线处于文本的下方，并且穿过文本
ideographic  和 bottom 相似，但是不一样
measureText(text).width  获取文本宽度obj.width

图片绘制

// img 图片对象，canvas对象，video对象 // x,y图片绘制的左上角，
// w, h图片绘制尺寸设置（图片缩放，不是截取）// x1,y1,w1,h1画布中的一个矩形区域
// 九个参数时是以图片左上角为基准，截取图片，具体查看API,三个，五个，九个参数时表示意义不同
drawImage(img, x, y, w, h，x1, y1, w1, h1 )

坐标变换
// 平移，移动画布的原点
translate(x, y) // 参数表示移动目标点的坐标
scale(x, y) // 参数表示宽高的缩放比例
rotate(angle) // 参数表示旋转角度