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
JavaScript
Der vollständige JS-Code des HTML5 Canvas-Tafeleffekts lautet wie folgt :
$(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" style="max-width:90%"Unterstützt realistische HTML5 Canvas-Tafeleffekte auf der mobilen Seite" >'); $('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" alt="Unterstützt realistische HTML5 Canvas-Tafeleffekte auf der mobilen Seite" >'); },500); } $(window).resize(function(){ chalkboard(); }); }
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)!