Supports mobile-side HTML5 Canvas realistic blackboard effects

Brief Tutorial

This is a blackboard special effect made using HTML5 Canvas. The blackboard special effect supports mobile phones. It can simulate the effect of using chalk to write on a blackboard. The blackboard special effects also have the following features:

• Use the left mouse button to write on the blackboard.

• Use the right mouse button to erase written words.

• Press the space bar to clear the content on the blackboard.

• Click the download button to save the written content as a picture and download it.

How to use

JavaScript

The complete js code of the HTML5 Canvas blackboard effect is as follows:

$(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%"Supports mobile-side HTML5 Canvas realistic blackboard effects" >&#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="Supports mobile-side HTML5 Canvas realistic blackboard effects" >&#39;);
    },500);
  }
  $(window).resize(function(){
    chalkboard();
  });
}

The above is the content that supports the realistic blackboard effects of HTML5 Canvas on the mobile terminal. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!