canvas

最新推荐文章于 2024-09-06 13:56:39 发布

Fine9548

最新推荐文章于 2024-09-06 13:56:39 发布

阅读量113

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/Fine9548/article/details/106578234

版权

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;
}

由于是动画，就没有截图展示

Fine9548

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas

HMTL保存文件就是将网页中的构造幕布中的图片以jpg的格式保存同样需要绘制幕布<!DOCTYPE html><html lang="en"><header> <meta charset="UTF-8"> <title>canvas保存文件</title> <script type="text/javascript" src="保存文件.js"></script> &lt
复制链接

扫一扫