前端小功能：canvas签名版

canvas签名版。

canvas生成图片保存。

复制代码
<!doctype html>

<html>

<head>

<meta charset="UTF">

<title>签名版</title>

<style>

*{margin:0;padding:0;}

</style>

</head>

<body>
    <div style="margin:20px auto; text-align:center;">签名版</div>
    <canvas id="canvasbox" width="500" height="250" style="border:1px solid green; margin:20px auto;display:block;"></canvas>
    <div class="btn" style="margin:0 auto; text-align:center;">
        <button id="savebtn">保存</button>
        <button id="clearbtn">清空</button>
    </div>
 <script>

     var canvasbox = document.getElementById("canvasbox");
     var ctx = canvasbox.getContext("2d");
     var iscanvas = false;
     var offsetX = '';
     var offsetY = '';
     canvasbox.addEventListener("mousedown", function(e){
         iscanvas = true;
         offsetX = e.offsetX;
         offsetY = e.offsetY;
     })
     canvasbox.addEventListener("mousemove", function(e){
         if(iscanvas){
             ctx.beginPath();
             ctx.moveTo(offsetX,offsetY)
             ctx.lineTo(e.offsetX,e.offsetY)
             ctx.lineWidth = 2;
             ctx.stroke()
             offsetX = e.offsetX;
             offsetY = e.offsetY;
         }
     })
     canvasbox.addEventListener("mouseup", function(){
         iscanvas = false;
     })
     canvasbox.addEventListener("mouseleave", function(){
         iscanvas = false;
     })
     var clearbtn = document.getElementById("clearbtn");
     clearbtn.addEventListener("click",function(){
         ctx.clearRect(0,0,canvasbox.width,canvasbox.height)
     })
     var savebtn = document.getElementById("savebtn");
     savebtn.addEventListener("click",function(){
         console.log(111)
         downLoad(saveAsPNG(canvasbox));
     })
     function downLoad(url){
        var oA = document.createElement("a");
        oA.download = parseInt(Math.random() * 1000000);// 设置下载的文件名，默认是'下载'
        oA.href = url;
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
    }
    // 保存成png格式的图片
    function saveAsPNG(canvas) {
        return canvas.toDataURL("image/png");
    }
    // 保存成jpg格式的图片
    function saveAsJPG(canvas) {
        return canvas.toDataURL("image/jpeg");
    }
 

</script>

</body>

</html>
复制代码

canvas简易教程。

没有终点，没有彼岸，坚持就好，愿岁月如初

posted @   smallbore  阅读(1479)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
回顶部
点击右上角即可分享
微信分享提示