使用 a- download 下载 属性,将 <canvas> 画布里的图形 保存为 PNG 格式
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
Your browser does not support the canvas element.
</canvas>
</br>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#009900";
cxt.fillRect(50,50,100,100);
function clearCanvas()
{
c.height=c.height;
}
var link = document.createElement('a');
link.innerHTML = '点击这里 下载画布的图形';
link.addEventListener('click', function(ev) {
link.href = c.toDataURL();
link.download = "mycanvaspainting.png";
}, false);
document.body.appendChild(link);
</script>
<br />
<button onclick="clearCanvas()">清空画布
</button>
</body>
</html>
