HMTL保存文件
就是将网页中的构造幕布中的图片以jpg的格式保存
同样需要绘制幕布
<!DOCTYPE html>
<html lang="en">
<header>
<meta charset="UTF-8">
<title>canvas保存文件</title>
<script type="text/javascript" src="保存文件.js"></script>
<style type="text/css">
body{margin: 0;
padding: 0;
}
</style>
</header>
<body οnlοad="draw('canvas');">
<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
然后是保存文件的代码
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "red";
context.fillRect(0,0,500,300);
window.location = canvas.toDataURL('image/png');
}
canvas绘制动画
var context;
var width,height;
var i;
function draw(id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
setInterval(painting,100);
i = 0;
}
function painting(){
context.fillStyle = "green";
context.fillRect(0,0,width,height);
context.clearRect(10,10,width,height);
context.fillStyle = "green";
context.fillRect(i,20,10,10);
i=i+20;
}
由于是动画,就没有截图展示