Heim > Web-Frontend > H5-Tutorial > Hauptteil

Unterstützt realistische HTML5 Canvas-Tafeleffekte auf der mobilen Seite

黄舟
Freigeben: 2017-01-19 13:41:04
Original
1590 Leute haben es durchsucht

Kurzes Tutorial

Dies ist ein Tafel-Spezialeffekt, der mit HTML5 Canvas erstellt wurde. Dieser Tafel-Spezialeffekt unterstützt Mobiltelefone. Er kann den Effekt der Verwendung von Kreide zum Schreiben auf einer Tafel simulieren. Die Merkmale dieses Tafeleffekts sind:

  • Sie können mit der linken Maustaste auf die Tafel schreiben.

  • Verwenden Sie die rechte Maustaste, um geschriebene Wörter zu löschen.

  • Drücken Sie die Leertaste, um den Inhalt von der Tafel zu löschen.

  • Klicken Sie auf die Download-Schaltfläche, um den geschriebenen Inhalt als Bild zu speichern und herunterzuladen.

So verwenden Sie

Unterstützt realistische HTML5 Canvas-Tafeleffekte auf der mobilen Seite

JavaScript

Der vollständige JS-Code des HTML5 Canvas-Tafeleffekts lautet wie folgt :

$(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%"Unterstützt realistische HTML5 Canvas-Tafeleffekte auf der mobilen Seite" >&#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="Unterstützt realistische HTML5 Canvas-Tafeleffekte auf der mobilen Seite" >&#39;);
    },500);
  }
  $(window).resize(function(){
    chalkboard();
  });
}
Nach dem Login kopieren

Das Obige ist der Inhalt, der die realistischen Tafeleffekte von HTML5 Canvas auf dem mobilen Endgerät unterstützt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage