<canvas id="canvas" width="400" height="400"></canvas> <div><button id="save">保存</button> </div>

　　

var arr = [{locations:[[0,0],[200,200],[0,400]],color:"red"},{locations:[[0,0],[400,0],[200,200]],color:"orange"},{locations:[[0,400],[100,300],[200,400]],color:"yellow"},{locations:[[100,300],[200,200],[300,300],[200,400]],color:"green"},{locations:[[300,100],[200,200],[300,300]],color:"blue"},{locations:[[300,100],[400,0],[400,200],[300,300]],color:"indigo"},{locations:[[200,400],[400,400],[400,200]],color:"purple"} ]; var oCanvas = document.getElementById("canvas"); var ctx = oCanvas.getContext("2d"); for(let i=0;i<arr.length;i ){draw(arr[i],ctx); }function draw(item,ctx){ctx.beginPath();ctx.moveTo(item.locations[0][0],item.locations[0][1]);for(let i = 0;i<item.locations.length;i ){let x = item.locations[i][0];let y = item.locations[i][1];ctx.lineTo(x,y);console.log(1234567)}ctx.closePath();ctx.fillStyle = item.color;ctx.fill();ctx.strokeStyle = "#000";ctx.lineWidth = 2;ctx.stroke(); } var imgId = document.getElementById("imgId"); document.getElementById("save").onclick = function (){downLoad(saveAsPNG(canvas)); }// 保存成png格式的圖片 function saveAsPNG(canvas) {return canvas.toDataURL("image/png"); }// 保存成jpg格式的圖片 function saveAsJPG(canvas) {return canvas.toDataURL("image/jpeg"); }// 保存成bmp格式的圖片 目前瀏覽器支持性不好 function saveAsBMP(canvas) {return canvas.toDataURL("image/bmp"); }/*** @author web得勝* @param {String} url 需要下載的文件地址* */ function downLoad(url){var oA = document.createElement("a");oA.download = '';// 設置下載的文件名，默認是'下載'oA.href = url;document.body.appendChild(oA);oA.click();oA.remove(); // 下載之后把創建的元素刪除 }

　文中圖片是個七巧板，如下:

　

　　

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的js将canvas保存成图片并下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。