canvas画布使用总结

H5自定义画布：（下面复制粘贴就能用了）
    HTML部分：
        <canvas id="canvas" style="border: 1px solid #999">
        </canvas>
    JS部分：        
        //画板
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth = 1.0;
        canvas.addEventListener('touchstart',function(event){//触摸点按下事件
            stopDefault();
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                ctx.beginPath();
                ctx.moveTo(touch.clientX-canvas.offsetLeft,touch.clientY-canvas.offsetTop);
                canvas.addEventListener('touchmove',function (event) {//手机拖动触摸点事件
                    var touche = event.targetTouches[0];
                    ctx.lineTo(touche.clientX - canvas.offsetLeft, touche.clientY - canvas.offsetTop);
                    ctx.stroke();
                },false)
                canvas.addEventListener('touchend',function (event) {//手机离开屏幕的事件
                    ctx.closePath();
                    startDefault();
                },false)
            }
        },false)
        
        //清空画布
        $("#cx").click(function(){//重新设置高或宽，便能重置画布
            var c=document.getElementById("canvas");  
            var cxt=c.getContext("2d");  
            c.height=c.height;
        })    
    
        //将某段HTML通过canvas转化成图片显示
        例如：<div id="html">要转化成Image图片的HTML代码</div>   //要转化成Image图片的HTML代码
              <img id="img" src="" />   //通过该图片显示出来
              
              1.首先引入<script type="text/javascript" src="${pageContext.request.contextPath}/js/html2canvas.js"></script>
              2.通过下面代码获取到DOM对象，然后将其base64数据付给图片的src即可显示
              var DOM=document.getElementById("html");
              html2canvas(DOM).then(function(canvas) {
                  var imageData = canvas.toDataURL();
                  $("#img").attr("src",imageData);
              });
        
//将某一个画布的内容，复制到另一块画布上
HTML部分：
    <canvas id="canvas" style="border: 1px solid #999">
        用户画的画布
    </canvas>
    <canvas id="canvas_fz" style="border: 1px solid #999">
        要复制过去的画布
    </canvas>
JS部分：    
var canvas=document.getElementById("canvas");//用户画的签名
var ctx=canvas.getContext("2d");
var imgData=ctx.getImageData(0,0,$("#canvas").width(),$("#canvas").height());//通过getImageData(左上角坐标,右上角坐标,获取的宽度,获取的高度)获取用户画的像素

var canvas_fz=document.getElementById("canvas_fz");
$(canvas_fz).attr("width",$("#canvas").width()).attr("height",$("#canvas").height()); //设置要复制到画布的大小
var canvas_fz_context=canvas_fz.getContext("2d");
canvas_fz_context.putImageData(imgData,0,0);//通过putImageData()将画布附上
        
        
        
        通过canvas将图片进行压缩，获取base64数据
        <img id="image-1" />
        
        var img = new Image();//首先new一个Image对象
        img.src=base64;//这里的base64是要压缩的图片的base64数据
        var canvas = document.createElement("canvas");//获取画布对象
        var context = canvas.getContext("2d");
        canvas.width = ($("#image-1").width());设置画布大小，与显示的图片大小一样
        canvas.height = ($("#image-1").height());
        // 核心JS就这个
        context.drawImage(img,0,0,canvas.width,canvas.height);
        
        var data=canvas.toDataURL();//这样通过toDataURL()方法就获取到了压缩后的base64数据