码迷,mamicode.com
首页 > 其他好文 > 详细

angular中使用canvas画布做验证码

时间:2017-09-02 16:44:13      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:sha   graph   and   line   随机数   red   random   top   ext2   

    //填充画布,五位随机数
    drawNumber(): void {
        this.clearCanvas();

        let ctx: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d");

        ctx.shadowBlur = 200;
        ctx.shadowColor = "black";
        ctx.font = "italic 20px Verdana";
        ctx.textAlign = "left";

        var gradient = ctx.createLinearGradient(0, 0, this.myGraph.nativeElement.width, 0);
        gradient.addColorStop(0, "magenta");
        gradient.addColorStop(0.5, "blue");
        gradient.addColorStop(1.0, "red");

        ctx.strokeStyle = gradient;

 var num = Math.random().toFixed(5) + "";
 this.validateCode = num.slice(2)
 ctx.strokeText(this.validateCode, 3, 22);

}

//清空画布
    clearCanvas(): void {
        let ctx: CanvasRenderingContext2D = this.myGraph.nativeElement.getContext("2d");
        ctx.clearRect(0, 0, this.myGraph.nativeElement.width, this.myGraph.nativeElement.height);
    }

 

angular中使用canvas画布做验证码

标签:sha   graph   and   line   随机数   red   random   top   ext2   

原文地址:http://www.cnblogs.com/lishidefengchen/p/7466721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!