web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
canvas
支持移动端的HTML5 Canvas逼真黑板特效
分类:
canvas
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### JavaScript 该HTML5 Canvas黑板特效的完整js代码如下: ```html $(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
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浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告