本篇内容主要讲解“html5如何实现canvas滑动验正效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5如何实现canvas滑动验正效果”吧!

页面布局

<canvasid="canva"width="500px"height="300px"></canvas>

样式：

<styletype="text/css">*{margin:0;padding:0;}#canva{background:indianred;}</style>

JS：

<scripttype="text/javascript">window.onload=function(){varcanva=document.getElementById('canva');varctx=canva.getContext('2d');varh=canva.height;varw=canva.width;varrext={//定义验证块的属性x:Math.random()*(w-50),y:Math.random()*(h-50),}varhk={//滑块属性x:'0',y:''}Rect();//绘制验证块Hk(0,rext.y);//绘制滑块canva.addEventListener('click',function(){varev=ev||event;varx=ev.clientX;vary=ev.clientY;if(x>=0&&x<=50&&y>=rext.y&&y<=rext.y+50){//canvas内部监听canva.addEventListener('mousemove',function(ev){ev=ev||event;ctx.clearRect(hk.x,hk.y,50,50);//清除滑块hk.x=ev.clientX;Hk(hk.x,rext.y);//绘制滑块varhk_x=ev.clientX;varyz_x=rext.x;(function(x,y){if(x>y&&x<y+50){console.log("验证成功");}})(hk_x,yz_x)//判断验证的匿名函数})}})//点击事件的处理functionRect(){ctx.fillStyle='whitesmoke';ctx.fillRect(rext.x,rext.y,50,50);}functionHk(x,y){hk.x=x;hk.y=y;ctx.fillRect(hk.x,hk.y,50,50);}}</script>

到此，相信大家对“html5如何实现canvas滑动验正效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！