将Canvas 绘制出来的东西作为图片保存起来，主要使用的是 toDataURL(type) ; type 是可选参数，如果省略 将使用png格式 来保存图片 MIME类型主要是设定图片被保存的类型， 当该扩展名被访问时，浏览器会自动使用指定应用程序打开。
<script> let cans=document.getElementById("myCanvas"); let ctx=cans.getContext("2d"); ctx.strokeStyle = "#0695FF"; //定义矩形的颜色 ctx.strokeRect(50,50,100,100); ctx.strokeRect(50,170,100,100); function imgType(ty) { let type = ty.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; } function download() { let type = 'png'; //设置下载图片的格式 let img_png_src = cans.toDataURL("image/png"); //将canvas保存为图片 let imgData = img_png_src.replace(imgType(type),'image/octet-stream'); let filename = '图片' + '.' + type; //下载图片的文件名 saveFile(imgData,filename); } let saveFile = function(data, fileName){ let save_link = document.createElement('a'); save_link.href = data; save_link.download = fileName; let event = document.createEvent('MouseEvents'); event.initEvent("click", true, false); save_link.dispatchEvent(event); }; </script>效果图：
HTML部分：
<div style="text-align: center;"> <canvas id="myCanvas" width="500" height="300" style="border: 1px solid #fff123"></canvas> <div> <button id="btn" onclick="download()">点我下载</button> </div> </div>