angular2.x 实现滑动拼图验证码功能

angular2.x 实现滑动拼图验证码功能

滑动拼图验证码功能请参考原文链接，感谢作者分享！
- http://www.cnblogs.com/huanglei-/p/8568405.html
-

---

下面举例说明在angular2版本及以上版本怎么实现此功能。

引入js

首先将封装好的js插件引入到项目目录下

配置js

全局配置
第一种方法是：找到配置文件 angular-cli.json

配置里边的script

第二种方法：直接在index.html中引入即可

引入css文件（全局样式）

直接引入index中的header 标签内即可

组件内使用滑块验证码功能

在login 组件内使用

在login.html中写入html片段

注意：因为在login.html中可能有好几个页面（首页/登录/忘记密码）此时不要通过*ngIf 或者 [hidden] 属性进行现实或隐藏。此处用的是 display：none和display ：block 来控制的，以便滑块验证码初始化的时候可以找到元素。

ts中引用

先在login.component.ts中引入

封装加载的方法：这里我是在页面初始化就加载了，但是可能所在元素是display：none 状态，所以用了一个三元运算符进行取值，以便找到需要初始化的dom

初始化加载 备注：全局只需加载一次即可。

示意图 :鼠标划过的时候 显示图片。

以上就是我的使用心得。在原来基础上做了部分修改，原始的例子和代码请参考原创地址！

http://www.cnblogs.com/huanglei-/p/8568405.html

下面是本例的js css 和 ts

slidingCode.js

(function (window) {
    const l = 42, // 滑块边长
        r = 10, // 滑块半径
        w = 310, // canvas宽度
        h = 155, // canvas高度
        PI = Math.PI
    const L = l + r * 2 // 滑块实际边长

    function getRandomNumberByRange(start, end) {
        return Math.round(Math.random() * (end - start) + start)
    }

    function createCanvas(width, height) {
        const canvas = createElement('canvas')
        canvas.width = width
        canvas.height = height
        return canvas
    }

    function createImg(onload) {
        const img = createElement('img')
        img.crossOrigin = "Anonymous"
        img.onload = onload
        img.onerror = () => {
            img.src = getRandomImg()
        }
        img.src = getRandomImg()
        return img
    }

    function createElement(tagName) {
        return document.createElement(tagName)
    }

    function addClass(tag, className) {
        tag.classList.add(className)
    }

    function removeClass(tag, className) {
        tag.classList.remove(className)
    }

    function getRandomImg() {
        return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 1084)
    }

    function draw(ctx, operation, x, y) {
        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.lineTo(x + l / 2, y)
        ctx.arc(x + l / 2, y - r + 2, r, 0, 2 * PI)
        ctx.lineTo(x + l / 2, y)
        ctx.lineTo(x + l, y)
        ctx.lineTo(x + l, y + l / 2)
        ctx.arc(x + l + r - 2, y + l / 2, r, 0, 2 * PI)
        ctx.lineTo(x + l, y + l / 2)
        ctx.lineTo(x + l, y + l)
        ctx.lineTo(x, y + l)
        ctx.lineTo(x, y)
        ctx.fillStyle = '