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

简要教程

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

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

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

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

  立即学习“前端免费学习笔记（深入）”；

  

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

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

  下载

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

 使用方法

JavaScript

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

$(document).ready(chalkboard);
 
function chalkboard(){
  $('#chalkboard').remove();
  $('.chalk').remove();
  $('body').prepend('
Save
');
  $('body').prepend('@@##@@');
  $('body').prepend('');
  $('body').prepend('
');
   
  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(mouseYDownload');
      $('.download').click(function(){
        IEsave(compimage);
      });
     
    }, 500);
  });
  function IEsave(ctximage){
    setTimeout(function(){
      var win = window.open();
      $(win.document.body).html('@@##@@');
    },500);
  }
  $(window).resize(function(){
    chalkboard();
  });
}

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