//清空画布的所有区域
 ctx.clearRect(x,y,宽，高);

//画图
//JavaScript 语法：context.drawImage(img,x,y);指定位置画
// 原始大小
//context.drawImage(img,x,y,width,height);
 指定 x y 处开始画图，图片显示的宽高

//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// 从img 的 sx sy出开始 剪贴 宽 swidth 高sheight 的图片 放在 画布的 xy处，整体大小 width, height 
ctx.drawImage(img,0,0,50,50);


ctx.getImageDate(x,y,width,height) 返回一个对象，该对象拷贝了画布指定矩形的像素数据（可能是多个像素点）

//如果在本地环境（非服务器环境） 下运行该方法，会被浏览器的安全策略阻止，原因是canvas要扫秒这个图片的资料，
//而不仅仅是显示，如果这个图片资源中隐藏了病毒（二进制信息） 会被加载。
    处理方法：1 使用本地服务器环境（vscode下使用 live server）