关于canvas 写字板，画板的实例1.0

最近一直在整canvas，也没整出什么牛逼的玩意儿，都是些简单的小demo，都不好意思拿出来了。这回这个小例子，在网上那是一搜一大堆，我拿出来，就是来污染网络环境的。

其功能就三个，画线，保存成图片，清除。

来来来,效果图：

 

这里是链接：https://chuyunshi.github.io/Example/chuyunshi-canvas_write/write.html //2017/6/1/15：02

代码搞起来：

html:

<body>

<canvas id="canvas">
</canvas>

<button class="btn" onclick="page.saveCanvas()">保存</button>
<button class="btn" onclick="page.clearCanvas()">清除</button>

<div class="saveImg" id="showImg">
    <img id="img" src="" alt="">
</div>

</body>

css:

*{
    margin:0;
    padding:0;
}
ul li{
    list-style: none;
}
body{
    overflow: hidden;
    text-align: center;
}
#canvas{
    border: 1px solid #ddd;
}
.btn{
    display: inline-block;
    padding: 5px;
    width:20%;
}
.saveImg{
    display: none;
    position:absolute;
    left:0;
    top:48%;
}
.saveImg img{

    border: 1px solid #ddd;
}
@-webkit-keyframes down{
    0%{
        -webkit-transform: translate3d(0, -120%, 0);
    }

    100%{
        -webkit-transform: translate3d(0, 0, 0);
    }
}
.down{
    -webkit-animation:  down 3s ease   ;
}
@-webkit-keyframes dou{
    0%{
        -webkit-transform: translate3d(0, 0%, 0);
    }
    50%{
        -webkit-transform: translate3d(0, 1%, 0);
    }
    100%{
        -webkit-transform: translate3d(0, 0%, 0);
    }
}
.dou{
    -webkit-animation:  dou 0.1s ease infinite   ;
}

js:



/**
 * Created by chuyunshi on 17-05-31.
 */
$(document).ready(function(){
    var pageH,pageW;

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var showImg=$("#showImg");
    var isDrawing=false;
    var el = $('#canvas');
    
    page={
        init:function(){
            page.resize();
            page._touch();

            $('body').on("touchmove",function (e) {
                e.preventDefault();
            });
        },
        resize:function(){
            console.log(111);
            pageW = $(window).width();
            pageH = $(window).height();
            canvas.width = pageW-2;
            canvas.height = pageH/2.5;
            showImg.find('img').css({
                'height': pageH/2.5+'px',
                'width' : pageW-2
            })
        },

        _touch:function(){
            el.on("touchstart",function(e){
                showImg.removeClass('down');
                isDrawing = true;
                ctx.beginPath();
                var touch = e.touches[0];
                ctx.moveTo(touch.pageX - canvas.offsetLeft, touch.pageY - canvas.offsetTop);
            });

            el.on("touchmove",function(e){
                if (isDrawing==true) {
                    ctx.strokeStyle='red';
                    ctx.lineWidth=2;
                    // 重新获取鼠标位置
                    var touch = e.touches[0];
                    var x=touch.pageX - canvas.offsetLeft;
                    var y=touch.pageY - canvas.offsetTop;
                    //画
                    ctx.lineTo(x, y);
                    ctx.stroke();
                };

            })

        },
        saveCanvas: function(){
            console.log(555);
            var img=document.getElementById("img");
            var img1=$('#img');
            img.src=canvas.toDataURL();
            ctx.clearRect(0, 0, pageW-2, pageH/2);
            showImg.css("display","block");
            showImg.addClass('down');
            img1.addClass('dou');
        },
        clearCanvas: function(){
            ctx.clearRect(0, 0, pageW-2, pageH/2);
            showImg.css("display","none");
            showImg.removeClass('down');
        },
    }
    page.init();
})








        

        

            posted on 
2017-06-01 10:51 
楚云实 
阅读(664) 
评论(0) 
 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    





            

        

        

            

导航