简要教程
这是一款使用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逼真黑板特效的内容。