html5黑板源码,支持移动端的HTML5 Canvas逼真黑板特效

简要教程

这是一款使用HTML5 Canvas制作的黑板特效，该黑板特效支持手机移动端，它能模拟使用粉笔在黑板上写字的效果。该黑板特效的特点还有：使用鼠标左键能够在黑板上写字。

使用鼠标右键能够擦除已写的字。

按空格键可以清空黑板上的内容。

点击下载按钮可以将写入的内容保存为图片并下载。

使用方法

JavaScript

该HTML5 Canvas黑板特效的完整js代码如下：$(document).ready(chalkboard);

function chalkboard(){

$('#chalkboard').remove();

$('.chalk').remove();

$('body').prepend('

Save

');

$('body').prepend('');

$('body').prepend('');

$('body').prepend('

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

$('.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

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('Download');

$('.download').click(function(){

IEsave(compimage);

});

}, 500);

});

function IEsave(ctximage){

setTimeout(function(){

var win = window.open();

$(win.document.body).html('');

},500);

}

$(window).resize(function(){

chalkboard();

});

}

以上就是支持移动端的HTML5 Canvas逼真黑板特效的内容，更多相关内容请关注PHP中文网(www.php.cn)！

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理