// 不建议在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) // 参数表示旋转角度
