java做橡皮擦效果_顶风作案，html5 canvas实现橡皮擦功能，擦了就知道有惊喜了...

2.[代码][JavaScript]代码

//通过修改globalCompositeOperation来达到擦除的效果

function tapClip(){

var hastouch = "ontouchstart" in window?true:false,

tapstart = hastouch?"touchstart":"mousedown",

tapmove = hastouch?"touchmove":"mousemove",

tapend = hastouch?"touchend":"mouseup";

canvas.addEventListener(tapstart , function(e){

clearTimeout(timeout)

e.preventDefault();

x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;

y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.lineCap = "round";　　//设置线条两端为圆弧

ctx.lineJoin = "round";　　//设置线条转折为圆弧

ctx.lineWidth = a*2;

ctx.globalCompositeOperation = "destination-out";

ctx.save();

ctx.beginPath()

ctx.arc(x1,y1,1,0,2*Math.PI);

ctx.fill();

ctx.restore();

canvas.addEventListener(tapmove , tapmoveHandler);

canvas.addEventListener(tapend , function(){

canvas.removeEventListener(tapmove , tapmoveHandler);

timeout = setTimeout(function(){

var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);

var dd = 0;

for(var x=0;x

for(var y=0;y 0){

dd++

}

if(dd/(imgData.width*imgData.height/900)<0.4){

canvas.className = "noOp";

}

},100)

});

function tapmoveHandler(e){

e.preventDefault()

x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;

y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;

ctx.save();

ctx.moveTo(x1,y1);

ctx.lineTo(x2,y2);

ctx.stroke();

ctx.restore()

x1 = x2;

y1 = y2;

}

})

}

java做橡皮擦效果_顶风作案，html5 canvas实现橡皮擦功能，擦了就知道有惊喜了...相关推荐

java canvas 动画效果_八大疯狂HTML5 Canvas及WebGL动画效果
[IT168应用]HTML5.WebGL和JavaScript改变了长久以来的动画制作行业.在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet.而现在,使用脚本语言和 ...
canvas水波纹效果_如何使用HTML5 canvas创建水波纹效果
canvas水波纹效果 Water ripple effect with HTML5. Today we continue JavaScript examples, and our article w ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
java做橡皮擦效果_基于canvas剪辑区域功能实现橡皮擦效果
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下这是基础结构没什么好说的 ? Document *{padding: 0;margin ...
八爪鱼是java做的吗_章鱼扫描仪：Java构建工具和恶意软件
八爪鱼是java做的吗 Alvaro Munoz最近在GitHub Security Lab网站上发布了" Octopus扫描程序恶意软件:攻击开源供应链 ". 我发现这篇文章很 ...
毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
html5在线考试倒计时,html5 canvas 实现倒计时功能
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...
java做橡皮擦效果_用HTML5 实现橡皮擦的涂抹效果的教程
最近项目刚好用到这种效果,也就是有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片.效果图如下: DEMO请戳右:DEMO 这种在网上还是挺常见的,本来就想直接网上找个demo套用下他的方 ...
h5 vr效果_浅谈html5在vr中的应用
使用过HTML5制作动画过程的开发者都知道,HTML5页面给人一种逼真的感觉,同时HTML也是可以制作VR页面,但是需要你熟练HTML5与JavaScript开发过程,所以在有必要的情况下,我们可以用 ...

java做橡皮擦效果_顶风作案，html5 canvas实现橡皮擦功能，擦了就知道有惊喜了...

java做橡皮擦效果_顶风作案，html5 canvas实现橡皮擦功能，擦了就知道有惊喜了...相关推荐

最新文章

热门文章