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

简要教程

这是一款使用HTML5 Canvas制作的黑板特效，该黑板特效支持手机移动端，它能模拟使用粉笔在黑板上写字的效果。该黑板特效的特点还有：

• 使用鼠标左键能够在黑板上写字。

• 使用鼠标右键能够擦除已写的字。

• 按空格键可以清空黑板上的内容。

• 点击下载按钮可以将写入的内容保存为图片并下载。

使用方法

JavaScript

该HTML5 Canvas黑板特效的完整js代码如下：

$(document).ready(chalkboard);
 
function chalkboard(){
  $('#chalkboard').remove();
  $('.chalk').remove();
  $('body').prepend('<div class="panel"><a class="link" target="_blank">Save</a></div>');
  $('body').prepend('<img src="img/bg.png" id="pattern" width=50 height=50>');
  $('body').prepend('<canvas id="chalkboard"></canvas>');
  $('body').prepend('<div class="chalk"></div>');
   
  var canvas = document.getElementById("chalkboard");
  $('#chalkboard').css('width',$(window).width());
  $('#chalkboard').css('height',$(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;
   
  $('#chalkboard').css('cursor','none');
  document.onselectstart = function(){ return false; };
  ctx.fillStyle = 'rgba(255,255,255,0.5)';  
  ctx.strokeStyle = 'rgba(255,255,255,0.5)';  
    ctx.lineWidth = brushDiameter;
  ctx.lineCap = 'round';
 
  var patImg = document.getElementById('pattern');
 
  document.addEventListener('touchmove', function(evt) {
        var touch = evt.touches[0];
        mouseX = touch.pageX;
        mouseY = touch.pageY;
        if (mouseY < height && mouseX < width) {
            evt.preventDefault();
            $('.chalk').css('left', mouseX + 'px');
            $('.chalk').css('top', mouseY + 'px');
            //$('.chalk').css('display', 'none');
            if (mouseD) {
                draw(mouseX, mouseY);
            }
        }
    }, false);
    document.addEventListener('touchstart', 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('touchend', function(evt) {
        mouseD = false;
    }, false);
    $('#chalkboard').css('cursor','none');
  ctx.fillStyle = 'rgba(255,255,255,0.5)';  
  ctx.strokeStyle = 'rgba(255,255,255,0.5)';  
    ctx.lineWidth = brushDiameter;
  ctx.lineCap = 'round';
   
  $(document).mousemove(function(evt){
    mouseX = evt.pageX;
    mouseY = evt.pageY;
    if(mouseY<height && mouseX<width){
      $('.chalk').css('left',(mouseX-0.5*brushDiameter)+'px');
      $('.chalk').css('top',(mouseY-0.5*brushDiameter)+'px');
      if(mouseD){
        if(eraser){
          erase(mouseX,mouseY);
        }else{
          draw(mouseX,mouseY);
          }
        }
    }else{
      $('.chalk').css('top',height-10);
      }
    });
  $(document).mousedown(function(evt){ 
    mouseD = true;
    xLast = mouseX;
    yLast = mouseY;
    if(evt.button == 2){
      erase(mouseX,mouseY);
      eraser = true;
      $('.chalk').addClass('eraser');
    }else{
      if(!$('.panel').is(':hover')){
        draw(mouseX+1,mouseY+1);
      }   
    }
  });
 
  $(document).mouseup(function(evt){ 
    mouseD = false;
    if(evt.button == 2){
      eraser = false;
      $('.chalk').removeClass('eraser');
    }
  });
 
  $(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 = 'rgba(255,255,255,'+(0.4+Math.random()*0.2)+')';
    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);
  }
 
  $('.link').click(function(evt){
 
    $('.download').remove();
 
    var imgCanvas = document.createElement('canvas');
    var imgCtx = imgCanvas.getContext("2d");
    var pattern = imgCtx.createPattern(patImg,'repeat');
 
    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('image/png','image/octet-stream');
 
      $('.panel').append('<a href="'+compimage+'" download="chalkboard.png" class="download">Download</a>');
      $('.download').click(function(){
        IEsave(compimage);
      });
     
    }, 500);
  });
  function IEsave(ctximage){
    setTimeout(function(){
      var win = window.open();
      $(win.document.body).html('<img src="'+ctximage+'" name="chalkboard.png">');
    },500);
  }
  $(window).resize(function(){
    chalkboard();
  });
}

以上就是支持移动端的HTML5 Canvas逼真黑板特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！