前端小功能：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 @ 2019-08-14 14:17  smallbore  阅读(1475)  评论(0)  编辑  收藏  举报
回顶部