支持移动端的HTML5 Canvas逼真黑板特效

$(document).ready(chalkboard); function chalkboard(){  $(&#39;#chalkboard&#39;).remove();  $(&#39;.chalk&#39;).remove();  $(&#39;body&#39;).prepend(&#39;<div class="panel"><a class="link" target="_blank">Save</a></div>&#39;);  $(&#39;body&#39;).prepend(&#39;<img  src="img/bg.png" id="pattern"    style="max-width:90%"支持移动端的HTML5 Canvas逼真黑板特效" >&#39;);  $(&#39;body&#39;).prepend(&#39;<canvas id="chalkboard"></canvas>&#39;);  $(&#39;body&#39;).prepend(&#39;<div class="chalk"></div>&#39;);     var canvas = document.getElementById("chalkboard");  $(&#39;#chalkboard&#39;).css(&#39;width&#39;,$(window).width());  $(&#39;#chalkboard&#39;).css(&#39;height&#39;,$(window).height());  canvas.width = $(window).width();  canvas.height = $(window).height();     var ctx = canvas.getContext("2d");     var width = canvas.width;  var height = canvas.height;  var mouseX = 0;  var mouseY = 0;  var mouseD = false;  var eraser = false;  var xLast = 0;  var yLast = 0;  var brushDiameter = 7;  var eraserWidth = 50;  var eraserHeight = 100;     $(&#39;#chalkboard&#39;).css(&#39;cursor&#39;,&#39;none&#39;);  document.onselectstart = function(){ return false; };  ctx.fillStyle = &#39;rgba(255,255,255,0.5)&#39;;    ctx.strokeStyle = &#39;rgba(255,255,255,0.5)&#39;;      ctx.lineWidth = brushDiameter;  ctx.lineCap = &#39;round&#39;;   var patImg = document.getElementById(&#39;pattern&#39;);   document.addEventListener(&#39;touchmove&#39;, function(evt) {        var touch = evt.touches[0];        mouseX = touch.pageX;        mouseY = touch.pageY;        if (mouseY < height && mouseX < width) {            evt.preventDefault();            $(&#39;.chalk&#39;).css(&#39;left&#39;, mouseX + &#39;px&#39;);            $(&#39;.chalk&#39;).css(&#39;top&#39;, mouseY + &#39;px&#39;);            //$(&#39;.chalk&#39;).css(&#39;display&#39;, &#39;none&#39;);            if (mouseD) {                draw(mouseX, mouseY);            }        }    }, false);    document.addEventListener(&#39;touchstart&#39;, function(evt) {        //evt.preventDefault();        var touch = evt.touches[0];        mouseD = true;        mouseX = touch.pageX;        mouseY = touch.pageY;        xLast = mouseX;        yLast = mouseY;        draw(mouseX + 1, mouseY + 1);    }, false);    document.addEventListener(&#39;touchend&#39;, function(evt) {        mouseD = false;    }, false);    $(&#39;#chalkboard&#39;).css(&#39;cursor&#39;,&#39;none&#39;);  ctx.fillStyle = &#39;rgba(255,255,255,0.5)&#39;;    ctx.strokeStyle = &#39;rgba(255,255,255,0.5)&#39;;      ctx.lineWidth = brushDiameter;  ctx.lineCap = &#39;round&#39;;     $(document).mousemove(function(evt){    mouseX = evt.pageX;    mouseY = evt.pageY;    if(mouseY<height && mouseX<width){      $(&#39;.chalk&#39;).css(&#39;left&#39;,(mouseX-0.5*brushDiameter)+&#39;px&#39;);      $(&#39;.chalk&#39;).css(&#39;top&#39;,(mouseY-0.5*brushDiameter)+&#39;px&#39;);      if(mouseD){        if(eraser){          erase(mouseX,mouseY);        }else{          draw(mouseX,mouseY);          }        }    }else{      $(&#39;.chalk&#39;).css(&#39;top&#39;,height-10);      }    });  $(document).mousedown(function(evt){     mouseD = true;    xLast = mouseX;    yLast = mouseY;    if(evt.button == 2){      erase(mouseX,mouseY);      eraser = true;      $(&#39;.chalk&#39;).addClass(&#39;eraser&#39;);    }else{      if(!$(&#39;.panel&#39;).is(&#39;:hover&#39;)){        draw(mouseX+1,mouseY+1);      }       }  });   $(document).mouseup(function(evt){     mouseD = false;    if(evt.button == 2){      eraser = false;      $(&#39;.chalk&#39;).removeClass(&#39;eraser&#39;);    }  });   $(document).keyup(function(evt){    if(evt.keyCode == 32){      ctx.clearRect(0,0,width,height);      layPattern();    }  });   $(document).keyup(function(evt){    if(evt.keyCode == 83){      changeLink();    }  });   document.oncontextmenu = function() {return false;};            function draw(x,y){    ctx.strokeStyle = &#39;rgba(255,255,255,&#39;+(0.4+Math.random()*0.2)+&#39;)&#39;;    ctx.beginPath();      ctx.moveTo(xLast, yLast);         ctx.lineTo(x, y);      ctx.stroke();                 // Chalk Effect    var length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter));    var xUnit = (x-xLast)/length;    var yUnit = (y-yLast)/length;    for(var i=0; i<length; i++ ){      var xCurrent = xLast+(i*xUnit);       var yCurrent = yLast+(i*yUnit);      var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;           var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;        ctx.clearRect( xRandom, yRandom, Math.random()*2+2, Math.random()+1);      }     xLast = x;    yLast = y;  }   function erase(x,y){    ctx.clearRect (x-0.5*eraserWidth,y-0.5*eraserHeight,eraserWidth,eraserHeight);  }   $(&#39;.link&#39;).click(function(evt){     $(&#39;.download&#39;).remove();     var imgCanvas = document.createElement(&#39;canvas&#39;);    var imgCtx = imgCanvas.getContext("2d");    var pattern = imgCtx.createPattern(patImg,&#39;repeat&#39;);     imgCanvas.width = width;    imgCanvas.height = height;     imgCtx.fillStyle = pattern;    imgCtx.rect(0,0,width,height);    imgCtx.fill();      var layimage = new Image;    layimage.src = canvas.toDataURL("image/png");     setTimeout(function(){       imgCtx.drawImage(layimage,0,0);       var compimage = imgCanvas.toDataURL("image/png");//.replace(&#39;image/png&#39;,&#39;image/octet-stream&#39;);       $(&#39;.panel&#39;).append(&#39;<a href="&#39;+compimage+&#39;" download="chalkboard.png" class="download">Download</a>&#39;);      $(&#39;.download&#39;).click(function(){        IEsave(compimage);      });         }, 500);  });  function IEsave(ctximage){    setTimeout(function(){      var win = window.open();      $(win.document.body).html(&#39;<img  src="&#39;+ctximage+&#39;" name="chalkboard.png" alt="支持移动端的HTML5 Canvas逼真黑板特效" >&#39;);    },500);  }  $(window).resize(function(){    chalkboard();  });}