1.基础概念：
canvas.getContext（type）
type：'2d'//建立一个二维的环境对象
'3d'//建立一个二维的环境对象
drawImage（img,sx,sy,swidth,sheight,x,y,width,height)
参数注解 img图片对象sx开始裁剪的x轴坐标sy开始裁剪的y轴坐标swidth裁剪的宽度sheight裁剪的高度x图片放置的x轴坐标y图片放置的y轴坐标width展示图片宽度height展示图片高度getImageData（x,y,width,height)//复制画布上指定矩形的像素数据
参数注解 x像素数据x轴坐标y像素数据y轴坐标width像素数据矩形宽度height像素数据矩形高度<html> <div style="display:none"> <img ref="conf0" src="../assets/bg.png"> </div> <canvas ref="canvas" style="width:100%;height:500px"></canvas> </html> <script> let myCanvas = this.$refs.canvas var ctx = myCanvas.getContext('2d') // 在Canvas画布 添加图片 var img = this.$refs.conf0 img.onload = () => { ctx.drawImage(img, 0, 0, 500, 100) const imageData = ctx.getImageData(30, 50, 1, 1).data console.log(imageData)//[56, 144, 244, 255] } </script>
