Prend en charge les effets de tableau réalistes HTML5 Canvas côté mobile

Bref tutoriel

Il s'agit d'un effet spécial de tableau noir réalisé à l'aide de HTML5 Canvas. Cet effet spécial de tableau noir prend en charge les téléphones mobiles. Il peut simuler l'effet de l'utilisation de la craie pour écrire sur un tableau noir. Les caractéristiques de cet effet de tableau sont :

• Vous pouvez écrire sur le tableau en utilisant le bouton gauche de la souris.

• Utilisez le bouton droit de la souris pour effacer les mots écrits.

• Appuyez sur la barre d'espace pour effacer le contenu du tableau.

• Cliquez sur le bouton de téléchargement pour enregistrer le contenu écrit sous forme d'image et le télécharger.

Comment utiliser

JavaScript

Le code js complet de l'effet de tableau noir HTML5 Canvas est le suivant :

$(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="img/bg.png" id="pattern"    style="max-width:90%"Prend en charge les effets de tableau réalistes HTML5 Canvas côté mobile" >&#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="&#39;+ctximage+&#39;" name="chalkboard.png" alt="Prend en charge les effets de tableau réalistes HTML5 Canvas côté mobile" >&#39;);
    },500);
  }
  $(window).resize(function(){
    chalkboard();
  });
}

Ce qui précède est le contenu qui prend en charge les effets de tableau noir réalistes de HTML5 Canvas sur le terminal mobile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !