Canvas初了解

canvas绘图的步骤：

页面添加canvas元素 -->获取2D画笔-->设置画笔--->清空屏幕（可选）-->绘制

1.页面添加canvas元素

<canvas id="canvas" width="400" height="400"></canvas>

 width,height在这里设置，因为若宽高变化会导致canvas重绘

 id是必须的，应该通过

let drawing = document.getElementById('canvas')

2.获取2D画笔

let context = drawing.getContext('2d')

3. 设置画笔

 此步骤可以设置画笔的颜色、粗细和位置，即通用属性的设置

4.清空屏幕（可选）

 

5. 绘制

 

 

Path2D结合translate可实现复制的效果

let drawing = document.getElementById('canvas')
let context = drawing.getContext('2d')

var ch = new Path2D()
ch.moveTo(20, 20)
// 绘制直线
context.stroke(ch)
// 将画布的原点(0,0)切换到(120,0)
context.translate(120,0)
context.stroke(ch)

drawImage()绘制图像，可以绘制图像的某一部分，以及增加或减少图像的尺寸

1.在画布上定位图像

context.drawImage(img,x,y)

2.在画布上定位图像，并规定图像的宽度和高度

context.drawImage(img,x,y,imgWidth,imgHeight)

3.剪切图像，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
// sx,sy为剪切img的坐标起点  swidth,sheight裁剪图像的大小
// x,y为图像放置在画布上的位置， width,height图像的放缩的大小