支援行動端的HTML5 Canvas逼真黑板特效

簡短教學

這是一款使用HTML5 Canvas製作的黑板特效，該黑板特效支援手機移動端，它能模擬使用粉筆在黑板上寫字的效果。此黑板特效的特點還有：

• 使用滑鼠左鍵能夠在黑板上寫字。

• 使用滑鼠右鍵能夠擦除已寫的字。

• 按空白鍵可以清空黑板上的內容物。

• 點擊下載按鈕可以將寫入的內容儲存為圖片並下載。

 使用方法

JavaScript

該HTML5 Canvas黑板特效的完整js程式碼如下：

$(document).ready(chalkboard);
 
function chalkboard(){
  $('#chalkboard').remove();
  $('.chalk').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="/static/imghw/default1.png"  data-src="img/bg.png"  class="lazy"   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="/static/imghw/default1.png"  data-src="&#39;+ctximage+&#39;"  class="lazy"   name="chalkboard.png" alt="支援行動端的HTML5 Canvas逼真黑板特效" >&#39;);
    },500);
  }
  $(window).resize(function(){
    chalkboard();
  });
}

上述網支援手機端支援端的更多逼真內容 CanvasreeeHT799相關網數的逼真內容，更多內容支援手機端（m.sbmmt.com）！