CSS代码： canvas { border: 1px solid #beceeb; background-color: #f0f3f9;} HTML代码： <canvas></canvas> JS代码： (function() { if (isNaN(window.screenX)) return; var canvas = document.querySelector("#canvas") , context = canvas.getContext("2d"); // 添加文字 context.save(); context.font = "30px 微软雅黑"; context.textAlign = "center"; context.fillText("点击生成新图片", 150, 85); context.restore(); // 点击事件 canvas.addEventListener("click", function() { this.toBlob && this.toBlob(function(blob) { var newImg = document.createElement("img"), url = URL.createObjectURL(blob); newImg.onload = function() { // 移除 URL.revokeObjectURL(url); }; newImg.src = url; document.querySelector(".demo").appendChild(newImg); }); }); })();