1.初识HTML5Canvas黑板特效
您试过在教室黑板上恣意挥洒吗？现在，有个软件叫HTML5Canvas黑板特效，您就能在手机上享受到这样的乐趣！这个特效据说能仿真粉笔画字，还支持手机版，超好玩的。我头一次见到时就被迷住了，仿佛又回到学生时光。这个特效让人倍感亲切，我已经等不及要学起来了。
2.准备工作
想做黑板特效？只需要几个小东西就行。首要的是一款能看懂HTML5Canvas的浏览器，像Chrome或者Firefox都可以。接着，把特效的js代码保存下来备用。剩下的呢就是找个打字儿的地方，比如说SublimeText或VisualStudioCode这种，来修改和调整代码。准备起来很容易的，只要会用电脑就能懂。这个特效我以前也弄过，所以对我来说小事儿一桩！
3.下载并导入js代码
首先得找特效的js代码，这个网上随便找。下下来后，也就是复制黏贴到咱们HTML文件里。导入的过程很简单，HTML文件多加一行代码就好了。我照着做，10分钟搞定。一看到代码进去了，感觉成就感爆棚！
4.编辑HTML文件
插进来JS代码后，就得给HTML加点料了，比如搞个画布展示黑板特效啥的。再添几个按钮控控动画启停就完美。说到编HTML，简直小菜一碟，会点基础语法就搞定。虽然我是搞熟了HTML才舒舒服服弄这个的，但你们也可以试试看！
5.运行黑板特效
搞定HTML文件，咱们就能玩转黑板特效！浏览器一开，输入那个链接就成。跟真的黑板似的，你能用手在屏幕上写字画图。我试过这特效，简直棒呆！随便乱涂乱画，写几个字拍拍屁股走人，感觉就跟黑板被擦干净一样真实。这效果太绝，让我完全沉迷进去了。
6.优化特效效果
用黑板特效，你或许会碰到字迹不清楚、特效慢之类的小麻烦。这时候就得把特效调优下！方法也挺多，比如调大字体、提升特效敏感度啥的。优化特效这事，得有点耐心，还得有技巧，但是别怕，只要你不放弃，肯定能达到自己想要的效果。我自己优化特效的时候，也遇到过难题，但我没放弃，最后还是搞定了，效果棒极了！
7.分享你的黑板特效
做完黑板特效后，记得赶紧跟家人和朋友们炫耀一下！他们肯定也想试试看！要是觉得不错，别忘了传上网，让更多人知道~这样不仅给大家带来欢乐，自己也会很有成就感哒。我每次分享自己做的特效都会超级开心，看着大家喜欢，那感觉真的超赞！
8.黑板特效的应用前景
黑板特效不只是玩乐工具，用途可大着！举个例子，它能用来在线授课，让学生对着电脑屏幕手写字体，跟真的黑板没两样儿。甚至也能用在广告设计中，引起大家的关注。随着HTML5Canvas技术的发展壮大，黑板特效肯定会得到更多人的喜欢和认可。我对这个特效的未来很看好，觉得它前途无量。
9.我的感悟
$(document).ready(chalkboard);
function chalkboard(){
$('#chalkboard').remove();
$('.chalk').remove();
$('body').prepend('');
$('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<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('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();
});
}
做黑板特效真的教会了我好多！比如HTML5Canvas技术怎么用，HTML文件怎么编辑，还有特效咋样才能炫酷。这些可是以后工作都可能用到。最关键的，就是每次做这个特效都会觉得很开心。看自己随心所欲地在屏幕上涂鸦，感觉好像回到了读书时候。这个特效真的好亲切，现在已经是我生活中的一部分了。
10.你准备好了吗？
你看完教程就可以试试，跟着步骤做，肯定能做出独一无二的黑板特效。在视觉效果下任意写字，看着消失的那一刻，真的很过瘾。这个小技巧不仅让你生活多点乐趣，还能学不少实用技能。别犹豫，快去试一试！
总结：看了这篇文章，你应该了解了黑板特效是怎么做出来的？跟着步骤走，你也可以做出自己的黑板特效，既有趣味性又能学点新东西。我建议你不妨试一试，然后把成果分享到评论区。如果你觉得这篇文章不错，别忘了帮忙点赞和转发给其他人，一起来感受HTML5Canvas给我们带来的乐趣！
评论0