HTML5源码作者：蓝文 - 2016年8月24日

1个投票

没有评论

HTML5-支持移动端的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();
  });
}           

Chalkboard黑板特效的github地址为：https://github.com/mmoustafa/Chalkboard

在线预览网盘下载

网盘下载密码：dvf9

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论取消回复

要发表评论，您必须先登录。