简要教程
这是一款使用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(); }); }
以上就是支持移动端的HTML5 Canvas逼真黑板特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!