angular中使用canvas画布做验证码

    //填充画布,五位随机数
    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);
    }
时间: 2024-10-29 10:45:40

angular中使用canvas画布做验证码的相关文章

HTML5中的<canvas>画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

HTML5中的&lt;canvas&gt;画布:简单介绍(0)

<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实 验.温馨提示:以下所有实验请使用最新版的opera,火狐. 定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本(javascript)来绘制图形.

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

HTML5 中的 canvas 画布

---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 在使用canvas之前应该给用户说明必须是ie9+的版本,否则不支持. 绘制简单的直线 1.先获取画布 var canvas = document.getElementById('canvas'); 2.配置绘制的环境 v

HTML5 中的 canvas 画布(二)

绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的位置'; 1. context.drawImage(image,20,20);   //三个参数 1.图片 2.x轴位置 3.y轴位置  图片的原本大小 2. context.drawImage(image,0,0,300,400)  //5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片

CANVAS画布与SVG的区别

CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言.在H5中看似canvas与svg很像,但是,他们有巨大的差别. CANVAS Canvas 是通过 JavaScript 来绘制 2D 图形. Canvas 是逐像素进行渲染的. 在Canvas中,一旦图形被绘制完成,他就不会继续得到浏览器的关注,如果他的位置发生变化,那么就需要重新来

用angular中的ng-repeat和ng-show来实现tab选项卡

虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id="news"></script>来装内容,我认为都比较麻烦.所以我是使用angular中的json和angular中的ng-show来做选项卡的. 话不多说,上代码 html部分 <!--设置nav导航栏--> <ul> <!--nav中的导航栏

如何在html5的canvas画布中绘制gif动态图片

我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)? 相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新 绘制图片,就能画出动态图片呢?答案当然是YES.下面就是我自己测试的一个例子,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 &l

【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式

阅读目录 一.Canvas简介 二.Canvas画布参数与应用 回到顶部 一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任何一个UI元素,都会自动创建画布,并且将新元素置于其下. 回到顶部 二.Canvas画布参数与应用 1.创建画布 当你创建任何一个UI元素的时候,都会自动创建画布.也可以主动创建一张画布:点击GameObject->UI->