JavaScript实现拖动滑块拼图验证(html5、canvas)
JavaScripthtml5 实现 验证 Canvas 拖动 滑块 拼图
2023-09-11 14:21:45 时间
引言:滑块拖动验证现在很多地方都用到,周末就琢磨着写了一个,放上来,看看有没有人用得上!
效果:
实现思路:
- 用一张画布绘制源图,再绘制一个填充的方形,这样就可以达到缺失的效果(方形的坐标是随机的);
- 再用一个画布绘制拖动块,同时用drawImage截取和上一步中方形区域一样坐标、大小的原图,就作为验证图了,把验证图放在最左边;
- 在拖动块处,按下鼠标然后拖动,拖动块和验证图会跟随鼠标移动,达到一定范围后放开鼠标,会进行验证;
- 验证通过则提示验证成功,验证不通过则拖动块和验证图会返回到最左边。
3个构造函数
图片构造函数
//图片对象ImageDraw构造函数
function ImageDraw(o,obj){
this.id='',
this.image=0,//图片对象(必填)
this.sx=0,//图片切片开始x位置(显示整个图片的时候不需要填)
this.sy=0,//图片切片开始y位置(显示整个图片的时候不需要填)
this.sWidth=0, //图片切片开始宽度(显示整个图片的时候不需要填)
this.sHeight=0,//图片切片开始高度ÿ
相关文章
- javascript访问html元素的内容(1)
- 怎样用JavaScript和HTML5 Canvas绘制图表
- JavaScript跳转到页面某个锚点#
- Win10系列:JavaScript综合实例1
- Windows Store App JavaScript 开发:模板绑定
- Javascript Prototypes之旅(A Plain English Guide to JavaScript Prototypes译文)
- JavaScript中的内置对象--Number对象
- Javascript实现万年历(日历表)
- WebView和JavaScript如何实现相互调用
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Case insensitive sorting for string arrays
- [Javascript] Creating an Immutable Object Graph with Immutable.js Map()
- 【JavaScript】jQuery
- [Javascript] HTML5 DOM project
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Decorators in JavaScript
- 使用DOM Breakpoints找到修改属性的Javascript代码
- ABAP,Java和JavaScript类的构造函数使用的一些陷阱
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- 【教程】HTML5+JavaScript编写flappy bird
- 【编程实践】JavaScript 正则匹配实例讲解
- 2014在辛星Javascript口译科