AJAX会员注册,入门实战

canvas 入门实战–诚邀卡生成与下载

2018/01/04 · HTML5 ·
Canvas

初稿出处: 守候   

强大的<canvas>,强大<canvas>

reg.php:
<script language=”javascript” src=”ajaxlist.js”></script>
<script>
function check(){
checkUserName_1(‘username’,16,’unamespan’)
checkpw_1(‘password’,6,’upw’)
checkSame_1(‘password’,’passAgain’,’urpw’)
checkrealname_1(‘realname’,8,’urealname’)
checktel_1(‘tel’,14,’utel’)
checkfax_1(‘fax’,14,’ufax’)
checkmobile_1(‘mobile’,11,’umobile’)
checkEmail_1(’email’,’uemail’)
var myform=document.myform;
if (myform.username.keytype==1){
return false;
}
if (myform.password.keytype==1){
return false;
}
if (myform.realname.keytype==1){
return false;
}
if (myform.tel.keytype==1){
return false;
}
if (myform.fax.keytype==1){
return false;
}
if (myform.email.keytype==1){
return false;
}
if (myform.mobile.keytype==1){
return false;
}
}
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<script>
(function(w){

1.前言

写了累累的javascript和css3的稿子,是时候写一篇canvas的了。canvas是html5提供的一个新的意义!至于效果,就是一个画布。然后画笔就是javascript。canvas的用处充裕的广,更加是html5嬉戏以及数据可视化那八个方面。现在canvas给我的感到就和css3如出一辙,可以不用太狠心,不过必需求会基础的用法。可是随后对canvas的急需,肯定会更为大。所以canvas很值得学习,而且学好canvas,就是很好的一个加分项。对于那篇小说,我也是以canvas初学者的角度写的,会有众多更上一层楼的位置。如若大家认为自己有啥可以改良的,或者提议,欢迎引导迷津!代码已上传github,要求的迎接star(downloadImg)。

我们看那篇小说从前,要精晓javascript的部分基础,也要望着询问一些canvas的api(canvas-MSN教程,canvas菜鸟教程)

<canvas>

我会告诉你本身不仅写了那篇博客还录了摄像吗?那里是视频地址 。我会告知你眼前前端进阶最好的qq群是
130977811 吗?群里每一周都有视频在线分享。

私家认为<canvas>是h5最重量级的新标签了,现在种种h5小游戏都是按照<canvas>的,它为游乐提供了一个功效强大的画布,可在画布上制图足够的始末,同时也催生出很多游戏引擎。现在就概括介绍一下<canvas>的一部分骨干绘图和图表处理效能:

  <form name=”myform” method=”post” action=”Reganswer.html”
onSubmit=”return check()”>
  <input type=”hidden” name=”oktext” value=”iiiooo” />
  <TABLE border=0 cellSpacing=1 cellPadding=3 width=”100%”
align=”center”>
              <tbody>
     <tr>
                <td height=”25″
align=right>会员帐号:</td>
                <td width=”242″ valign=top nowrap><INPUT
onBlur=”checkUserName_1(‘username’,16,’unamespan’)” size=”30″
onFocus=”onFouces(‘unamespan’)” name=username keytype2=”uname”
class=”input_txt” keytype=”1″ style=”height:22px; width:222px”>
<strong><font
color=”#FF0000″>*</font></strong></td>
                <td width=”382″ valign=top nowrap><SPAN
class=gray
id=unamespan>3-16个字符(a-z,0-9,_)</SPAN></td>
     </tr>
              <tr>
                <td height=”25″
align=right>会员密码:</td>
                <td><INPUT
onBlur=”checkpw_1(‘password’,6,’upw’)” onFocus=”onFouces(‘upw’)”
class=”input_txt” type=password maxLength=30 name=password
keytype2=”pw” keytype=1 style=”height:22px; width:222px”>
                  <strong><font
color=”#FF0000″>*</font></strong></td>
                <td><SPAN class=gray
id=upw>6-16个字符(a-z,a-z,0-9,_)</SPAN></td>
              </tr>
              <tr>
                <td height=”25″ align=right
valign=middle>验证密码:</td>
                <td><INPUT
onBlur=”checkSame_1(‘password’,’passAgain’,’urpw’)”
onFocus=”onFouces(‘urpw’)” class=”input_txt” type=password maxLength=30
name=passAgain keytype2=”rpw” keytype=”1″ style=”height:22px;
width:222px”>
                  <strong><font
color=”#FF0000″>*</font></strong>
                <td><SPAN class=gray
id=urpw>请再输入五回登陆密码。</SPAN></tr>

var quse = {
colors : [],
getUrl : function(obj){

2.诚邀卡实例

邀约卡自动生成这么些会有的,毕竟有时候,很多特邀卡都是同等的,就是被邀约的人不平等而已,也就是说,整个约请卡,就是一个名字分裂,那么上边。就写一套代码,根据名字生成特邀卡!

1.制图线条

制图的宗旨步骤是:先用getContext(“2d”)获取二维绘图环境上下文,有二维那肯定也有三位了?是的,三维就要用到WebGL了,技术水平有限,明天就不探究三维了(三围肿么这么面熟~~!)。然后设置画笔样式,lineWidth画笔宽度,strokeStyle画笔颜色,lineCap线头样式。样式设置为止后就开首绘图了,首先用moveTo()把一个看不到的光标移动到源点地方,然后lineTo()设定至关首要,最后stroke()画出线条。

亚洲必赢官网 1

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
<title>绘制线条</title>
<style>
 body,div{margin:0px;padding:0px;text-align:center}
 #canv{
   border:2px solid black;
   border-radius:4px;
   box-shadow:0px 0px 10px black;
   -webkit-box-shadow:0px 0px 10px black;
   -moz-box-shadow:0px 0px 10px black;
 }
</style>
</head>

<body>
    <h1>绘制线条</h1>
    <canvas id="canv" width="400px" height="300px">
        你若能看到这句话说明你浏览器不支持canvas!
    </canvas>
</body>
<script type="text/javascript">
    var canv = document.getElementById("canv");
   //获取2d上下文
   var ctx = canv.getContext("2d");
   //设置样式
   ctx.lineWidth = 40;
   ctx.strokeStyle = "red";
   ctx.lineCap = "round"; //butt ,square,round
   ctx.beginPath();
   //设置起始点
   ctx.moveTo(20,20);
   ctx.lineTo(200,200);
   //开始绘制定义好的路径
   ctx.stroke();
</script>
</html>

              <tr>
                <td height=”25″ colspan=”3″ align=center
valign=middle><hr width=”90%” color=#cccccc
size=1></td>
              </tr>
                <tr valign=top>
                  <td height=”25″ align=right
valign=middle>您的真名:<strong><font
color=”#FF0000″></font></strong></td>
                  <td width=”242″ valign=top><INPUT
onBlur=”checkrealname_1(‘realname’,8,’urealname’)” class=”input_txt”
onFocus=”onFouces(‘urealname’)” type=text maxLength=30 name=realname
keytype2=”realn” keytype=1 size=”30″>
                  <strong><font
color=”#FF0000″>*</font></strong></td>
                  <td width=”382″ valign=top><SPAN class=gray
id=urealname>请输入您的人名。</SPAN></td>
                </tr>
                <tr valign=top>
                  <td height=”25″ align=right
valign=middle>您的性别:</td>
                  <td valign=top><input type=radio checked
value=0 name=sex class=”input_txt”>
                    先生  
                    <input type=radio value=1 name=sex>
                    女士 </td>
                  <td valign=top> </td>
                </tr>
    <TR vAlign=top>
            <TD align=”right”
vAlign=middle>所在省份:</TD>
            <TD colspan=”2″><SELECT name=area
class=”input_txt”
onChange=”ChangeSelect(document.myform.area.options[document.myform.area.selectedIndex].value);”>
              <OPTION value=”” selected>请采取省</OPTION>
       <option value=’1′>浙江省</option><option
value=’3′>安徽省</option><option
value=’4′>北京</option><option
value=’5′>福建省</option><option
value=’6′>甘肃省</option><option
value=’7′>广东省</option><option
value=’8′>广西</option><option
value=’9′>贵州省</option><option
value=’10’>海南省</option><option
value=’11’>河北省</option><option
value=’12’>河南省</option><option
value=’13’>黑龙江</option><option
value=’14’>湖北省</option><option
value=’15’>湖南省</option><option
value=’16’>吉林省</option><option
value=’17’>江苏省</option><option
value=’18’>江西省</option><option
value=’19’>辽宁省</option><option
value=’20’>内蒙古</option><option
value=’21’>宁夏</option><option
value=’22’>青海</option><option
value=’23’>山东省</option><option
value=’24’>山西省</option><option
value=’25’>陕西省</option><option
value=’26’>上海</option><option
value=’27’>四川省</option><option
value=’28’>天津</option><option
value=’29’>西藏</option><option
value=’30’>新疆</option><option
value=’31’>云南省</option><option
value=’32’>重庆</option><option
value=’2161′>台湾</option><option
value=’2162′>香港</option><option
value=’2163′>澳门</option>
            </SELECT>
   <select name=”city” class=”input_txt”>
   <option value=”” selected=”selected”>请选用市</option>
   </select> <strong><font
color=”#FF0000″>*</font></strong></TD>
            </TR>
    <TR vAlign=top>
   <TD align=”right” valign=”middle”>工作单位:</TD>
   <TD><INPUT maxLength=80 class=”input_txt” size=30
name=company></TD>
      <TD> </TD>
    </TR>
          <TR vAlign=top>
            <TD align=”right”
vAlign=middle>联系地址:</TD>
            <TD><font color=#ff6600 size=2><input
class=”input_txt” size=30 name=address></font></TD>
            <TD> </TD>
          </TR>
          <TR vAlign=top>
            <TD vAlign=middle align=right>邮  编:</TD>
            <TD><FONT color=#ff6600 size=2><INPUT
class=”input_txt” size=30 name=zip></FONT></TD>
            <TD> </TD>
          </TR>
                <tr valign=top>
                  <td height=”25″ align=”right”
valign=middle>电  话:<strong><font
color=”#FF0000″></font></strong></td>
                  <td><INPUT
onBlur=”checktel_1(‘tel’,14,’utel’)” class=”input_txt”
onFocus=”onFouces(‘utel’)” type=text maxLength=30 name=tel
keytype2=”uteln” keytype=1 size=”30″> <strong><font
color=”#FF0000″>*</font></strong></td>
                  <td><SPAN class=gray
id=utel>请勿超越14个字符,格式例如:0571-88861928。</SPAN></td>
                </tr>
                <tr valign=top>
                  <td height=”25″ align=right
valign=middle>传  真:</td>
                  <td><INPUT
onBlur=”checkfax_1(‘fax’,14,’ufax’)” class=”input_txt”
onFocus=”onFouces(‘ufax’)” type=text maxLength=30 name=fax
keytype2=”ufaxn” keytype=1 size=”30″> <strong><font
color=”#FF0000″>*</font></strong></td>
                  <td><SPAN class=gray
id=ufax>请勿当先14个字符,格式例如:0571-88861928。</SPAN></td>
                </tr>
                <tr valign=top>
                  <td height=”25″ align=right
valign=middle>邮  箱:<strong><font
color=”#FF0000″></font></strong></td>
                  <td><INPUT
onBlur=”checkEmail_1(’email’,’uemail’)” size=”30″ class=”input_txt”
onFocus=”onFouces(‘uemail’)” maxLength=64 name=email keytype2=”eml”
keytype=”1″> <strong><font
color=”#FF0000″>*</font></strong></td>
亚洲必赢官网 ,                  <td><SPAN class=gray
id=uemail>请可相信填写邮件地址,方便注册激活。</SPAN></td>
                </tr>
                <tr valign=top>
                  <td height=”25″ align=”right”
valign=middle>手  机:</td>
                  <td><INPUT
onBlur=”checkmobile_1(‘mobile’,14,’umobile’)” class=”input_txt”
onFocus=”onFouces(‘umobile’)” type=text maxLength=30 name=mobile
keytype2=”umobilen” keytype=1 size=”30″> <strong><font
color=”#FF0000″>*</font></strong></td>
                  <td><SPAN class=gray
id=umobile>格式例如:13588888888。</SPAN></td>
                </tr>
                <tr>
                  <td height=”25″
align=”right”>咨询QQ:</td>
                  <td><input size=30 name=QQ maxlength=”20″
class=”input_txt”></td>
                  <td> </td>
                </tr>

var url;

2-1.运作效果亚洲必赢官网 2

html代码

JavaScript

<html> <head> <meta charset=”utf-8″>
<title>下载图片</title> <style> .set-option { float:
left; width: 400px; } .set-option .text { width: 200px; height: 40px;
padding-left: 10px; border-radius: 4px; border: 1px solid #ccc; }
.set-option td { padding: 10px 0; } .set-option td:first-child {
text-align: right; padding-right: 10px; } .set-option p { margin: 0;
line-height: 16px; } .check-box { width: 16px; height: 16px; margin: 0;
vertical-align: top; } button { width: 200px; height: 50px; border:
none; color: #fff; font-size: 16px; cursor: pointer; display: block;
margin: 10px auto; } button:hover { opacity: .9; } .btn-all {
background: #f90; } .btn-save { background: #09f; } .btn-download {
background: #4CAF50; } </style> </head> <body>
<div> <div class=”set-option”> <table> <tr>
<td>画布尺寸</td> <td><input type=”text”
class=”text” id=”size”/></td> </tr> <tr>
<td>背景图片</td> <td><input type=”file”
id=”file”/></td> </tr> <tr>
<td>用户名</td> <td> <input type=”text”
class=”text” id=”user-name”/> </td> </tr> <tr>
<td>用户名x坐标</td> <td> <input type=”number”
class=”text” id=”text-option-x”/></br> <p><input
type=”checkbox” class=”check-box” value=”1″
id=”is-center-x”>居中体现</p> </td> </tr>
<tr> <td>用户名y坐标</td> <td> <input
type=”number” class=”text” id=”text-option-y”/></br>
<p><input type=”checkbox” class=”check-box” value=”1″
id=”is-center-y”>居中显示</p> </td> </tr>
<tr> <td>用户名字体大小</td> <td><input
type=”number” class=”text” id=”text-size”/></td> </tr>
<tr> <td>文字颜色</td> <td><input type=”text”
class=”text” id=”text-color”/></td> </tr> <tr>
<td>图片类型</td> <td> <select type=”text”
class=”text” id=”img-type”> <option
value=”jpg”>jpg</option> <option
value=”png”>png</option> </select> </td>
</tr> </table> <button id=”save-image”
class=”btn-save”>效果预览</button> <button id=”download-img”
class=”btn-download”>下载当前图片</button> <button
id=”download-all” class=”btn-all”>批量导出</button>
</div> <div class=”show-canvas”> <canvas width=200
height=200 id=”thecanvas”></canvas> </div> </div>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
    <meta charset="utf-8">
    <title>下载图片</title>
    <style>
        .set-option {
            float: left;
            width: 400px;
        }
 
        .set-option .text {
            width: 200px;
            height: 40px;
            padding-left: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
 
        .set-option td {
            padding: 10px 0;
        }
 
        .set-option td:first-child {
            text-align: right;
            padding-right: 10px;
        }
 
        .set-option p {
            margin: 0;
            line-height: 16px;
        }
 
        .check-box {
            width: 16px;
            height: 16px;
            margin: 0;
            vertical-align: top;
        }
 
        button {
            width: 200px;
            height: 50px;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            display: block;
            margin: 10px auto;
        }
 
        button:hover {
            opacity: .9;
        }
 
        .btn-all {
            background: #f90;
        }
 
        .btn-save {
            background: #09f;
        }
 
        .btn-download {
            background: #4CAF50;
        }
    </style>
</head>
<body>
<div>
    <div class="set-option">
        <table>
            <tr>
                <td>画布尺寸</td>
                <td><input type="text" class="text" id="size"/></td>
            </tr>
            <tr>
                <td>背景图片</td>
                <td><input type="file" id="file"/></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" class="text" id="user-name"/>
                </td>
            </tr>
            <tr>
                <td>用户名x坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-x"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-x">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名y坐标</td>
                <td>
                    <input type="number" class="text" id="text-option-y"/></br>
                    <p><input type="checkbox" class="check-box" value="1" id="is-center-y">居中显示</p>
                </td>
            </tr>
            <tr>
                <td>用户名字体大小</td>
                <td><input type="number" class="text" id="text-size"/></td>
            </tr>
            <tr>
                <td>文字颜色</td>
                <td><input type="text" class="text" id="text-color"/></td>
            </tr>
            <tr>
                <td>图片类型</td>
                <td>
                    <select type="text" class="text" id="img-type">
                        <option value="jpg">jpg</option>
                        <option value="png">png</option>
                    </select>
                </td>
            </tr>
        </table>
        <button id="save-image" class="btn-save">效果预览</button>
        <button id="download-img" class="btn-download">下载当前图片</button>
        <button id="download-all" class="btn-all">批量导出</button>
    </div>
    <div class="show-canvas">
        <canvas width=200 height=200 id="thecanvas"></canvas>
    </div>
</div>
</body>
</html>

功能如图,那么大家细想一下,关于一张诚邀卡,有哪些事物是急需变更的!看到上图相比不难发现!有如下需求转移的性质:图片的轻重,图片,用户名,用户名的坐标(x,y,x轴是或不是居中,y轴是或不是居中),用户名字体的大小,用户名字体的水彩,以及下载图片的序列。

如此那般就赢得了如下的参数(我们看看有些参数是有值的,可以想成默许值就行了)

var option = { img: ‘111.jpg’, width: 500, height: 350, fontSize: “20px
Microsoft YaHei”, color: “black”, text: ‘守候’, imgType: ‘jpg’, x: 30,
y: 30, xCenter: false, yCenter: false, };

1
2
3
4
5
6
7
8
9
10
11
12
13
var option = {
    img: ‘111.jpg’,
    width: 500,
    height: 350,
    fontSize: "20px Microsoft YaHei",
    color: "black",
    text: ‘守候’,
    imgType: ‘jpg’,
    x: 30,
    y: 30,
    xCenter: false,
    yCenter: false,
};

2.制图矩形

矩形的绘图步骤同上所述,但有二种绘制类型:实心矩形fillRect(起源x,源点y,长,宽),空心矩形strokeRect(源点x,起源y,长,宽)。

亚洲必赢官网 3

   var canv = document.getElementById("canv");
   //获取2d上下文
   var ctx = canv.getContext("2d");
   //设置样式
   ctx.lineWidth = 10;
   ctx.strokeStyle = "red"; 

   //绘制实心矩形
   ctx.fillStyle="red";
   ctx.fillRect(10,10,100,100);

    </table></td>
                </tr>
                <tr>
                  <td height=”45″ colspan=”3″
align=”right”></td>
                </tr>
              </tbody>
          </table></form>

url = window.webkitURL.createObjectURL(obj.files.item(0));

2-2.步骤

3.绘制圆形

一如既往,也分实心和空心,首要选拔arc(圆心x,圆心y,半径,其实角度,停止角度*Math.PI/180,顺逆时针);

亚洲必赢官网 4

var canv = document.getElementById("canv");
   //获取2d上下文
  var ctx = canv.getContext("2d");
   //设置样式
   ctx.lineWidth = 10;
   ctx.strokeStyle = "red";

 /*  ctx.beginPath();
   //中心点,半径,始末角度,顺逆时针
   ctx.arc(200,200,50,0,270*Math.PI/180,false);
   ctx.stroke();
*/

   //实心
   ctx.fillStyle = "red";
   ctx.beginPath();
   ctx.arc(200,200,50,0,270*Math.PI/180,false);
   ctx.fill();

ajaxlist.js

return url;

1.发端作用

根据地点的参数,先开首画一个功力,代码基本都是一个写法,没什么技术

//画图 function draw(obj) { var canvas =
document.getElementById(“thecanvas”); //画布大小 canvas.width =
obj.width; canvas.height = obj.height; //设置图片 var img = new Image();
img.src = obj.img; var ctx = canvas.getContext(“2d”); //设置字体的坐标
var _x = obj.x, _y = obj.y; //是或不是居中突显 if (obj.xCenter) { _x =
obj.width / 2; } if (obj.yCenter) { _y = obj.height / 2; } //图片加载后
img.onload = function () { //先画图片 ctx.drawImage(img, 0, 0);
//设置文字的轻重 ctx.font = obj.fontSize; //设置文字的颜色 ctx.fillStyle
= obj.color; //设置文字坐标 if (obj.xCenter) { ctx.textAlign = “center”;
} //画文字 ctx.fillText(obj.text, _x, _y); }; } window.onload =
function () { draw(option); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//画图
function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //画布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //设置图片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //设置字体的坐标
    var _x = obj.x, _y = obj.y;
    //是否居中显示
    if (obj.xCenter) {
        _x = obj.width / 2;
    }
    if (obj.yCenter) {
        _y = obj.height / 2;
    }
    //图片加载后
    img.onload = function () {
        //先画图片
        ctx.drawImage(img, 0, 0);
        //设置文字的大小
        ctx.font = obj.fontSize;
        //设置文字的颜色
        ctx.fillStyle = obj.color;
        //设置文字坐标
        if (obj.xCenter) {
            ctx.textAlign = "center";
        }
        //画文字
        ctx.fillText(obj.text, _x, _y);
    };
}
 
window.onload = function () {
    draw(option);
}

4.擦除

能破就能立,能绘制就能擦除,用clearRect(源点x,源点y,擦出范围长,擦出范围宽)达成擦除。

亚洲必赢官网 5

//设置样式
   ctx.lineWidth = 10;
   ctx.fillStyle = "red";
   //绘制矩形
  ctx.fillRect(10,10,200,100);
  //擦除
  ctx.clearRect(30,30,100,50);

 

},
bing : function(obj){

亚洲必赢官网 62.动态改变参数

来看图已经画好了,工作实际上早就到位一半了!

上面就是动态改变参数!这一步其实很不难。
第一,改变画布的尺寸

//画布尺寸 //获取按钮 var size = document.getElementById(“size”);
size.add伊夫ntListener(“blur”, function () { //按照空格,区分高宽 var
_width = parseInt(size.value.replace(/(^\s*)|(\s*$)/g,
“”).split(/\s+/)[0]), _height =
parseInt(size.value.replace(/(^\s*)|(\s*$)/g,
“”).split(/\s+/)[1]); //把参数的width和height改掉 option.width =
_width || 100; option.height = _height || 100; //重新画图
draw(option); });

1
2
3
4
5
6
7
8
9
10
11
12
13
//画布尺寸
//获取按钮
var size = document.getElementById("size");
size.addEventListener("blur", function () {
    //根据空格,区分高宽
    var _width = parseInt(size.value.replace(/(^\s*)|(\s*$)/g, "").split(/\s+/)[0]),
        _height = parseInt(size.value.replace(/(^\s*)|(\s*$)/g, "").split(/\s+/)[1]);
    //把参数的width和height改掉
    option.width = _width || 100;
    option.height = _height || 100;
    //重新画图
    draw(option);
});

上边代码设置了,只要输入框失去了热点,就会改变画布的尺寸,上边来运行下,看下效果(gif图救经引足,大家看懂就好)亚洲必赢官网 7

canvas没有层级的传教,只要改canvas,都要重绘。哪怕就是一个字移动一个像素。

搞好了这一个,下边做拔取图片的功能!

//拔取图片 //获取图片控件 var file = document.getElementById(“file”),
imagesFile, imageData; file.add伊芙ntListener(‘change’, function (e) {
//获取图片 imagesFile = e.target.files[0]; //把图片转base64 var reader
= new FileReader(); reader.readAsDataURL(imagesFile); //图片加载后
reader.onload = function (e) { //设置option的img属性,再冲洗年绘制
imageData = this.result; option.img = imageData; draw(option); } });
<img src=”” />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//选择图片
//获取图片控件
var file = document.getElementById("file"), imagesFile, imageData;
file.addEventListener(‘change’, function (e) {
    //获取图片
    imagesFile = e.target.files[0];
    //把图片转base64
    var reader = new FileReader();
    reader.readAsDataURL(imagesFile);
    //图片加载后
    reader.onload = function (e) {
        //设置option的img属性,再冲洗年绘制
        imageData = this.result;
        option.img = imageData;
        draw(option);
    }
});
 
<img src="https://segmentfault.com/img/bVZX7E?w=991&h=797" />

亚洲必赢官网 8下边开始改文字,用户名这几个略带差异等,我以空格分割。若是输入多个用户名,以率先个用户名重绘。上面代码,注释就不写了,依然和方面的逻辑一样!

//用户名 var userName = document.getElementById(“user-name”);
userName.addEventListener(“blur”, function () { var _text =
userName.value.replace(/(^\s*)|(\s*$)/g, “”).split(/\s+/);
option.text = _text[0]; draw(option); }); <img
src=”” />

1
2
3
4
5
6
7
8
9
//用户名
var userName = document.getElementById("user-name");
userName.addEventListener("blur", function () {
    var _text = userName.value.replace(/(^\s*)|(\s*$)/g, "").split(/\s+/);
    option.text = _text[0];
    draw(option);
});
 
<img src="https://segmentfault.com/img/bVZUnM?w=949&h=703" />

亚洲必赢官网 9下边开端用户名的坐标,代码方面,也是改option的相干属性

optionXCenter.add伊芙ntListener(“change”, function () { if
(optionXCenter.checked) { option.xCenter = true; } else { option.xCenter
= false; option.x = parseInt(optionX.value); } draw(option); });
//纵坐标 var optionY = document.getElementById(“text-option-y”);
optionY.value = option.y; var optionYCenter =
document.getElementById(“is-center-y”);
optionY.add伊芙ntListener(“input”, function () { if
(optionYCenter.checked) { option.yCenter = true; } else { option.yCenter
= false; option.y = parseInt(optionY.value); } draw(option); });
//是还是不是垂直居中显示 optionYCenter.add伊夫ntListener(“change”, function ()
{ if (optionYCenter.checked) { option.yCenter = true; } else {
option.yCenter = false; option.y = parseInt(optionY.value); }
draw(option); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    optionXCenter.addEventListener("change", function () {
        if (optionXCenter.checked) {
            option.xCenter = true;
        }
        else {
            option.xCenter = false;
            option.x = parseInt(optionX.value);
        }
        draw(option);
    });
    //纵坐标
    var optionY = document.getElementById("text-option-y");
    optionY.value = option.y;
    var optionYCenter = document.getElementById("is-center-y");
    optionY.addEventListener("input", function () {
        if (optionYCenter.checked) {
            option.yCenter = true;
        }
        else {
            option.yCenter = false;
            option.y = parseInt(optionY.value);
        }
        draw(option);
    });
    //是否垂直居中显示
    optionYCenter.addEventListener("change", function () {
        if (optionYCenter.checked) {
            option.yCenter = true;
        }
        else {
            option.yCenter = false;
            option.y = parseInt(optionY.value);
        }
        draw(option);
    });

亚洲必赢官网 10是或不是水平居中显得亚洲必赢官网 11

其余的性质,字体大小和颜色,基本是同等的代码,运行的机能图我不放了!

//字体颜色 var textColor = document.getElementById(“text-color”);
textColor.add伊夫ntListener(“blur”, function () { textColor.value === “”
? option.color = “#fff” : option.color = ‘#’ + textColor.value;
draw(option); }); //字体大小 var textSize =
document.getElementById(“text-size”); textSize.add伊夫ntListener(“input”,
function () { textSize.value === “” ? option.fontSize = ’20px Microsoft
YaHei’ : option.fontSize = textSize.value + ‘px Microsoft YaHei’;
draw(option); });

1
2
3
4
5
6
7
8
9
10
11
12
//字体颜色
var textColor = document.getElementById("text-color");
textColor.addEventListener("blur", function () {
    textColor.value === "" ? option.color = "#fff" : option.color = ‘#’ + textColor.value;
    draw(option);
});
//字体大小
var textSize = document.getElementById("text-size");
textSize.addEventListener("input", function () {
    textSize.value === "" ? option.fontSize = ’20px Microsoft YaHei’ : option.fontSize = textSize.value + ‘px Microsoft YaHei’;
    draw(option);
});

5.渐变

可完结三种渐变方式:线性渐变createLinearGradient(),径向渐变createRadialGradient()。

亚洲必赢官网 12

 var canv = document.getElementById("canv");
   //获取2d上下文
  var ctx = canv.getContext("2d");

  //径向渐变
  var grd=ctx.createRadialGradient(100,100,10,100,100,50);
  grd.addColorStop(0.1,"red");
  grd.addColorStop(0.8,"blue");
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,200,200);

/* 
  //线性渐变 
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0.2,"red");//必须0-1之间的数,代表颜色的渐变权重
  grd.addColorStop(0.7,"blue");
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,200,200);
  */

var
username_help=’3-16个字符(a-z,0-9,_)’;
var username_ok='<img
src=images/note_ok.gif valign=middle>’;
var username_error='<img
src=images/note_error.gif align=absbottom> 用户名当先了16个字符!’;

var self = this;

3.按钮操作

功效预览

不怕预览当前canvas的一个功力,这些就很简短了,就是新开一个窗口,然后把图片写进去而已

//预览图片 function saveImageInfo() { var mycanvas =
document.getElementById(“thecanvas”); //生成图片 var image =
mycanvas.toDataURL(“image/png”); var w = window.open(‘about:blank’,
‘image from canvas’); //把图片新进新的窗口 w.document.write(“<img
src=”%22%20+%20image%20+%20%22″ alt=”from canvas” />”); } var
saveButton = document.getElementById(“save-image”);
saveButton.add伊芙ntListener(‘click’, saveImageInfo);

1
2
3
4
5
6
7
8
9
10
11
//预览图片
function saveImageInfo() {
    var mycanvas = document.getElementById("thecanvas");
    //生成图片
    var image = mycanvas.toDataURL("image/png");
    var w = window.open(‘about:blank’, ‘image from canvas’);
    //把图片新进新的窗口
    w.document.write("<img src="%22%20+%20image%20+%20%22" alt="from canvas" />");
}
var saveButton = document.getElementById("save-image");
saveButton.addEventListener(‘click’, saveImageInfo);

亚洲必赢官网 13

下载当前图片

下载图片这一个,基本也是写法的,都是些回想的东西

//图片类型 var imgType = document.getElementById(“img-type”);
imgType.add伊芙ntListener(“change”,function () {
option.imgType=this.value; }); //下载图片 function downloadImg(fileName)
{ //获取canvas var myCanvas = document.getElementById(“thecanvas”);
//设置图片类型 var image = myCanvas.toDataURL(“image/” +
option.imgType).replace(“image/” + option.imgType,
“image/octet-stream”); var save_link =
document.createElementNS(”, ‘a’);
save_link.href = image; //设置下载图片的名号 save_link.download =
fileName + ‘.’ + option.imgType; //下载图片 var event =
document.create伊芙nt(‘Mouse伊芙nts’); event.initMouse伊夫nt(‘click’, true,
false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//图片类型
var imgType = document.getElementById("img-type");
imgType.addEventListener("change",function () {
    option.imgType=this.value;
});
//下载图片
function downloadImg(fileName) {
    //获取canvas
    var myCanvas = document.getElementById("thecanvas");
    //设置图片类型
    var image = myCanvas.toDataURL("image/" + option.imgType).replace("image/" + option.imgType, "image/octet-stream");
    var save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml’, ‘a’);
    save_link.href = image;
    //设置下载图片的名称
    save_link.download = fileName + ‘.’ + option.imgType;
    //下载图片
    var event = document.createEvent(‘MouseEvents’);
    event.initMouseEvent(‘click’, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
}

亚洲必赢官网 14

批量下载图片

本条纷纷一点,但也简单,上面一步一步来!

1.先是批量导出,那么用户名我那里是采用空格分割,那么现在我在option里面,弄一个字段textAll,所有文字的聚众。all代表是或不是是批量下载。fn属性代表回调函数

//批量导出 var downloadAll = document.getElementById(“download-all”);
downloadAll.add伊芙ntListener(‘click’, function () { var _text =
userName.value.replace(/(^\s*)|(\s*$)/g, “”).split(/\s+/);
option.textAll = _text; option.all = true; option.fn = downloadImg;
draw(option); });

1
2
3
4
5
6
7
8
9
//批量导出
var downloadAll = document.getElementById("download-all");
downloadAll.addEventListener(‘click’, function () {
    var _text = userName.value.replace(/(^\s*)|(\s*$)/g, "").split(/\s+/);
    option.textAll = _text;
    option.all = true;
    option.fn = downloadImg;
    draw(option);
});

2.然后修改绘制的函数draw,判断是不是是全部制图的情事!

JavaScript

function draw(obj) { var canvas = document.getElementById(“thecanvas”);
//画布大小 canvas.width = obj.width; canvas.height = obj.height;
//设置图片 var img = new Image(); img.src = obj.img; var ctx =
canvas.getContext(“2d”); //设置字体的坐标 var _x = obj.x, _y = obj.y;
//是不是居中显示 if (obj.xCenter) { _x = obj.width / 2; } if
(obj.yCenter) { _y = obj.height / 2; } //图片加载后 img.onload =
function () { //是不是是全体打印 if(obj.all){ //遍历textAll for(var
i=0;i<obj.textAll.length;i++){ //绘制图片 ctx.drawImage(img,0,0);
//设置字体大小 ctx.font=obj.fontSize; //设置字体颜色
ctx.fillStyle=obj.color; //是或不是居中展现 if(obj.xCenter){
ctx.textAlign=”center”; } //绘制文字 ctx.fillText(obj.textAll[i],
_x,_y); //是不是回调 if(obj.fn){ obj.fn(obj.textAll[i]); } }
//最终打消一切批量下载 defult.all=false; } else{ ctx.drawImage(img,0,0);
ctx.font=obj.fontSize; ctx.fillStyle=obj.color; if(obj.xCenter){
ctx.textAlign=”center”; } ctx.fillText(obj.text, _x,_y); } }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function draw(obj) {
    var canvas = document.getElementById("thecanvas");
    //画布大小
    canvas.width = obj.width;
    canvas.height = obj.height;
    //设置图片
    var img = new Image();
    img.src = obj.img;
    var ctx = canvas.getContext("2d");
    //设置字体的坐标
    var _x = obj.x, _y = obj.y;
    //是否居中显示
    if (obj.xCenter) {
        _x = obj.width / 2;
    }
    if (obj.yCenter) {
        _y = obj.height / 2;
    }
    //图片加载后
    img.onload = function () {
        //是否是全部打印
        if(obj.all){
            //遍历textAll
            for(var i=0;i<obj.textAll.length;i++){
                //绘制图片
                ctx.drawImage(img,0,0);
                //设置字体大小
                ctx.font=obj.fontSize;
                //设置字体颜色
                ctx.fillStyle=obj.color;
                //是否居中显示
                if(obj.xCenter){
                    ctx.textAlign="center";
                }
                //绘制文字
                ctx.fillText(obj.textAll[i], _x,_y);
                //是否回调
                if(obj.fn){
                    obj.fn(obj.textAll[i]);
                }
            }
            //最后取消全部批量下载
            defult.all=false;
        }
        else{
            ctx.drawImage(img,0,0);
            ctx.font=obj.fontSize;
            ctx.fillStyle=obj.color;
            if(obj.xCenter){
                ctx.textAlign="center";
            }
            ctx.fillText(obj.text, _x,_y);
        }
    };
}

6.像素处理:黑白处理,反色处理

原理:先把要处理的图样读取到canvas上,然后遍历每个像素点,更改像素的rgb值即可。

黑白处理:

亚洲必赢官网 15

反色处理:

亚洲必赢官网 16

<body>
    <h1>像素处理</h1>
  <img src = "logo.png" id="logo" />
    <canvas id="canv" width="800px" height="800px">
        你若能看到这句话说明你浏览器不支持canvas!
    </canvas>

</body>
<script type="text/javascript">
  var canv = document.getElementById("canv");
   //获取2d上下文
  var ctx = canv.getContext("2d");

  var image = new Image();
  image.src = "01.jpg";
  image.onload = function(){
  ctx.drawImage(image,0,0);
  var imgdata = ctx.getImageData(0,0,250,250);
  var pixels = imgdata.data;

/* // 遍历每个像素并对 RGB 值进行取反
for (var i=0, n=pixels.length; i<n; i+= 4){
pixels[i] = 255-pixels[i];  //r
pixels[i+1] = 255-pixels[i+1];  //g
pixels[i+2] = 255-pixels[i+2];  //b
} */


  // 遍历每个像素并更改 RGB 值
  for (var i=0, n=pixels.length; i<n; i+= 4){
  var grayscale = pixels[i]*.3+pixels[i+1]*.59+pixels[i+2]*.11;  //灰度处理
    pixels[i ] = grayscale; // r
    pixels[i+1] = grayscale; // g
    pixels[i+2] = grayscale; // b
  }

  // 在指定位置进行像素重绘
  ctx.putImageData(imgdata, 250, 0);
}; 

</script>

var username_error_1='<img
src=images/note_error.gif align=absbottom>
您的用户名输入格式不科学!’;
var username_exist='<img
src=images/note_error.gif align=absbottom>
您填写的用户名早已存在!’;
var username_null='<img
src=images/note_error.gif align=absbottom> 用户名无法为空!’;

obj.onchange = function(){

亚洲必赢官网 17亚洲必赢官网 18

7.小动画

卡通原理:先绘制一张图纸drawImage(img,x,y,80,80);时刻更改图片的坐标x,y来使图片不断移动。

亚洲必赢官网 19

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
</head>
<body>
<canvas id="cav" width="500" height="500">// 设置绘图环境
     var cav = document.getElementById("cav");
     var cxt=cav.getContext('2d'); 
    //初始位置
     var x=5;
     var y=5;
    // 创建绘图对象,并且画出来 
     var img =new Image();
     img.src="logo.png";
     draw();
     function draw()
     {        //清除上一帧动画
          cxt.clearRect(0,0,500,500);  //十分重要
          x+=5;
          y+=5;
          cxt.drawImage(img,x,y,80,80);
     }
     //设定动画,时间间隔100毫秒
    var time = setInterval(draw,100);

    function stop(){
        clearInterval(time);
    }
</script>
</body>
</html>

假定大家不清除上三遍绘制的结果效果会怎么样呢?那就注释掉cxt.clearRect(0,0,500,500);试一试。

function draw()
     {        //清除上一帧动画
         //注释掉啦 cxt.clearRect(0,0,500,500);  //十分重要
          x+=5;
          y+=5;
          cxt.drawImage(img,x,y,80,80);
     }

功效将三番五次出现一叠制图的图纸:

亚洲必赢官网 20

var
password_help=’6-16个字符(a-z,a-z,0-9,_)’;
var password_too_simple='<img
src=images/note_error.gif align=absbottom> 您设置的密码过于简短!’;

var img = self.createImage(self.getUrl(this));

3.小结

至于canvas入门的首先篇小说,就写到那里了。写完未来,也发现自己对canvas的也是有许多的不懂!上文的那例子,知识canvas很粗略的一个入门实例。canvas即使深远学习,能做到很多令人惊异的效劳,那个可未来要提升学习,假诺发现些值得记录的学识,我也会写小说。canvas是一个极度值得学习的文化,也是很有意思的一个文化。期待与大家有越来越多的交换和学习!

1 赞 2 收藏
评论

亚洲必赢官网 21

8.拖拽原理+canvas完成简易画板

亚洲必赢官网 22<!DOCTYPE
HTML> <html> <head> <meta charset=”utf-8″/>
<style> #canvas{cursor:default;} #red{background:red;
width:30px;height: 27px} #blue{background:blue; width:30px;height:
27px} #yellow{background:yellow; width:30px;height: 27px}
#white{background:white; width:30px;height: 27px}
#zi{background:#8B026B; width:30px;height: 27px} </style>
</head> <body> <canvas id=”canvas” width=”600″
height=”400″> </canvas>
<br><label>画笔颜料:</label> <input type=”button”
id=”red” onclick=”linecolor=’red'”> <input type=”button” id=”blue”
onclick=”linecolor=’blue'”> <input type=”button” id=”yellow”
onclick=”linecolor=’yellow'”> <input type=”button” id=”white”
onclick=”linecolor=’white'”> <input type=”button” id=”zi”
onclick=”linecolor=’#8B026B'”> <label>画笔宽度:</label>
<select id=”sel”> <option value=”4″>4</option>
<option value=”8″>8</option> <option
value=”16″>16</option> <option
value=”30″>30</option> </select> <input type=”button”
value=”生成图片” onclick=”toImg()”><br> <img id=”image”
src=”” width=”500px” height=”200px”> <script
type=”text/javascript”> //下拉画笔宽度 window.onload=function(){ var
huabi=document.getElementById(“sel”); huabi.onchange=function(){
linw=huabi.value; }; //linw=huabi; }; var
canvas=document.getElementById(“canvas”); var
ctx=canvas.getContext(“2d”); //画一个粉黑色矩形 ctx.fillStyle=”#002200″;
ctx.fillRect(0,0,600,400); //按下标记 var onoff=false; var oldx=-10; var
oldy=-10; //设置颜色默许为白色 var linecolor=”white”; //画笔宽度 var
linw=5; //鼠标移动事件,事件绑定
canvas.add伊芙ntListener(“mousedown”,down,false);
canvas.add伊夫ntListener(“mousemove”,draw,true);
canvas.add伊夫ntListener(“mouseup”,up,false); function down(event){
onoff=true; oldx=event.pageX; oldy=event.pageY; } function up(){
onoff=false; } function draw(event){ if(onoff==true) { var
newx=event.pageX; var newy=event.pageY; ctx.beginPath();
ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor;
ctx.lineWidth=linw; ctx.lineCap=”round”; ctx.stroke(); oldx=newx;
oldy=newy; } } function toImg(){
document.getElementById(“image”).src=canvas.toDataURL(“image/jpg”); }
</script> </body> </html> 点我举行代码

效果:

亚洲必赢官网 23

情节很基础,各位见笑啊。

 

canvas
我会告诉你我不光写了那篇博客还录了摄像吗?那里是视频地址。我会告诉你眼前前端进阶最好的qq群是
1309…

var password_too_length='<img
src=images/note_error.gif align=absbottom>
您设置的密码长度当先了16个字符!’;
var password_AJAX会员注册,入门实战。ok='<img
src=images/note_ok.gif valign=middle>’;
var password_null='<img
src=images/note_error.gif align=absbottom> 密码不可以为空!’;

}

var
repassword_help=’请再输入三次登陆密码!’;
var repassword_unsame='<img
src=images/note_error.gif align=absbottom>
输入的登陆密码不一样,请重新输入!’;
var repassword_null='<img
src=images/note_error.gif align=absbottom> 验证密码不可以为空!’;

},
createImage : function(url){

var urealname_help=’请输入您的姓名。’;

var img = new Image;
img.src = url;

var urealname_ok='<img
src=images/note_ok.gif valign=middle>’;
var urealname_null='<img
src=images/note_error.gif align=absbottom> 姓名不可以为空!’;
var urealname_error='<img
src=images/note_error.gif align=absbottom>
姓名当先了8个字符!’;
var urealname_error2='<img
src=images/note_error.gif align=absbottom>
姓名格式不科学!’;
var
utel_help=’请勿超过14个字符,格式例如:0571-88861928。’;
var utel_null='<img
src=images/note_error.gif align=absbottom> 电话不可以为空!’;
var utel_error='<img
src=images/note_error.gif align=absbottom>
电话当先了14个字符!’;
var utel_error2='<img
src=images/note_error.gif align=absbottom>
电话格式不科学!’;
var
ufax_help=’请勿当先14个字符,格式例如:0571-88861928。’;
var ufax_null='<img
src=images/note_error.gif align=absbottom> 传真不可以为空!’;
var ufax_error='<img
src=images/note_error.gif align=absbottom>
传真超越了14个字符!’;
var ufax_error2='<img
src=images/note_error.gif align=absbottom>
传真格式不科学!’;
var
umobile_help=’格式例如:13588888888。’;
var umobile_null='<img
src=images/note_error.gif align=absbottom>
手机号码不可以为空!’;
var umobile_error='<img
src=images/note_error.gif align=absbottom>
手机号码超越了11个字符!’;
var umobile_error2='<img
src=images/note_error.gif align=absbottom>
手机号码格式不科学!’;
var
email_help=’请可信填写邮件地址,方便注册激活。’;
var email_error='<img
src=images/note_error.gif align=absbottom> 您的信箱填写不得法!’;

var self = this;

var email_exist='<img
src=images/note_error.gif align=absbottom>
此邮箱已被登记,请输入任何邮箱地址!’;
var email_null='<img
src=images/note_error.gif align=absbottom> 邮箱无法为空!’;

img.onload = function(){
self.putImage(img);
}

var email_ok='<img
src=images/note_ok.gif valign=middle>’;
var word_help=’word_help’;
var word_error=’word_error’;
var oTR;
var oTD;
//该函数可以创立大家须要的XMLHttpRequest对象

},
putImage : function(img){

function getHTTPObject(){
var xmlhttp = false;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType(‘text/xml’);

var canvas = document.getElementById(“canvas”);

}
}else{
try{
xmlhttp = new
ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e){
try{
xmlhttp = new
ActiveXObject(“Microsoft.XMLHTTP”);
}catch(E){ xmlhttp = false; }
}
}
return xmlhttp;
}
var http = getHTTPObject();

var ctx = canvas.getContext(“2d”);

function getAbsLeft(e){
var l=e.offsetLeft;
while(e=e.offsetParent) l += e.offsetLeft;

var imgWidth = canvas.width = img.width;

return l;
}
function getAbsTop(e) {
var t=e.offsetTop;
while(e=e.offsetParent) t += e.offsetTop;

var imgHeight = canvas.height = img.height;

t=t+18;
return t;
}
//——————————————————-

canvas.style.marginLeft = -imgWidth/2+”px”;

function onFouces(str){
document.getElementById(str).className=’word_help’;

ctx.drawImage(img , 0,0,imgWidth,imgHeight,0,0,imgWidth,imgHeight);

if(str==’unamespan’){
document.getElementById(str).innerHTML=username_help;

this.bindCanvas(canvas);

}else if(str==’upw’){
document.getElementById(str).innerHTML=password_help;

},
start : function(id){
var fileInput = document.getElementById(“fileInput”);
this.bing(fileInput);
},
bindCanvas : function(canvas){

}else if(str==’uhrtype’){
document.getElementById(str).innerHTML=hrtype_help;

var self = this;

}else if(str==’urpw’){
document.getElementById(str).innerHTML=repassword_help;

canvas.onmousedown = function(e){

}else if(str==’urealname’){
document.getElementById(str).innerHTML=urealname_help;

this.down = true;

}else if(str==’utel’){
document.getElementById(str).innerHTML=utel_help;

this.style.cursor = “crosshair”;

}else if(str==’ufax’){
document.getElementById(str).innerHTML=ufax_help;

if( this.down ){
var x = e.pageX , y = e.pageY;

}else if(str==’umobile’){
document.getElementById(str).innerHTML=umobile_help;

var left = x – this.offsetLeft , top = y – this.offsetTop;

}else if(str==’uemail’){
document.getElementById(str).innerHTML=email_help;

self.getColor(this , {x : left , y : top});

}
}
function backState(str){
if(str==’uname’){
document.getElementById(‘username’).keytype=0;

}

document.getElementById(‘unamespan’).className=’gray’;

}

document.getElementById(‘unamespan’).innerHTML=username_ok;

canvas.onmousemove = function(e){

}else if(str==’pw’){
document.getElementById(‘password’).keytype=0;

if( this.down ){
var x = e.pageX , y = e.pageY;

document.getElementById(‘upw’).className=’gray’;

var left = x – this.offsetLeft , top = y – this.offsetTop;

document.getElementById(‘upw’).innerHTML=password_ok;

self.getColor(this , {x : left , y : top});

}else if(str==”hr”){
document.getElementById(‘hrlibtype’).keytype=0;

}

document.getElementById(‘uhrtype’).className=’gray’;

}

document.getElementById(‘uhrtype’).innerHTML=hrtype_help;

canvas.onmouseup = function(){
this.down = false;
this.style.cursor = “default”
}

}else if(str==”rpw”){
document.getElementById(‘passAgain’).keytype=0;

},
getColor : function(canvas , obj){

document.getElementById(‘urpw’).className=’gray’;

var ctx = canvas.getContext(“2d”);

document.getElementById(‘urpw’).innerHTML=password_ok;

var imgData = ctx.getImageData(obj.x , obj.y , 1 , 1);

}else if(str==”realn”){
document.getElementById(‘realname’).keytype=0;

var self = this;

document.getElementById(‘urealname’).className=’gray’;

var r = imgData.data[0] , g = imgData.data[1] , b =
imgData.data[2];

document.getElementById(‘urealname’).innerHTML=urealname_ok;

var span =
document.getElementById(“mianban”).getElementsByTagName(“span”)[0];
var i =
document.getElementById(“mianban”).getElementsByTagName(“i”)[0];
var btn =
document.getElementById(“mianban”).getElementsByTagName(“button”)[0];

}else if(str==”uteln”){
document.getElementById(‘tel’).keytype=0;

span.innerHTML = “颜色 : ” + this.RGB(r,g,b);

document.getElementById(‘utel’).className=’gray’;

i.style.background = this.RGB(r,g,b);

document.getElementById(‘utel’).innerHTML=urealname_ok;

this.colors = [r,g,b];

}else if(str==”ufaxn”){
document.getElementById(‘fax’).keytype=0;

if(!btn.jianting){

document.getElementById(‘ufax’).className=’gray’;

btn.jianting = true;

document.getElementById(‘ufax’).innerHTML=urealname_ok;

btn.onclick = function(){

}
else if(str==”umobilen”){
document.getElementById(‘mobile’).keytype=0;

if(confirm(“是或不是要求模糊匹配?”)){

document.getElementById(‘umobile’).className=’gray’;

self.quse(canvas, ctx ,true)

document.getElementById(‘umobile’).innerHTML=urealname_ok;

}else{

}
else if(str==”eml”){
document.getElementById(’email’).keytype=0;

self.quse(canvas, ctx ,false)

document.getElementById(‘uemail’).className=’gray’;

}

document.getElementById(‘uemail’).innerHTML=email_ok;

}

}
}

}

function
checkUserName_1(obj_str,num,obj_str1){
var obj=document.getElementById(obj_str);

},
quse : function(canvas , ctx , o){

var
obj_help=document.getElementById(obj_str1);
obj.keytype=0;
if(obj.value.length==0){
obj.keytype=1;
obj_help.innerHTML=username_null;

var data = ctx.getImageData(0,0,canvas.width,canvas.height);

obj_help.className=word_error;
return false;
}
if(obj.value.length>num){
obj.keytype=1;
obj_help.innerHTML=username_error;

var r = this.colors[0] , g = this.colors[1] , b =
this.colors[2];

obj_help.className=word_error;
return false;
}
//检查是不是有不符合规定的字符
var name_str=obj.value;
//name_str=name_str.replace(/[\u4e00-\u9fa5]/g,”);

for(var i = 0 ; i < data.data.length; i+=4){

name_str=name_str.replace(/[a-zA-Z0-9_]/g,”);

var newdata = data.data;

name_str=name_str.replace(/-/g,”);

var r1 = newdata[i+0] , g1 = newdata[i+1] , b1 = newdata[i+2];

if(name_str!=”){
obj.keytype=1;
obj_help.innerHTML=username_error_1;

if(o){

obj_help.className=word_error;
return false;
}
//检查用户名是不是存在

var r3 = (r – r1) / 256 , g3 = (g – g1) / 256 , b3 = (b – b1) / 256;

var username
=document.getElementById(‘username’).value;

var bai = (1 – Math.sqrt(r3 * r3 + g3 * g3 + b3 * b3)) * 100;

url=”checkuserreg.php?username=”+username;
//借使用户名存在,chksn.asp的回到结果必须是“您填写的用户名已经存在”

if(bai > 90){

//alert(url);
http.open(“GET”,url,true);
http.onreadystatechange =
handleHttpResponseForUserName_1;
http.send(null);
if(obj.keytype==0){
backState(“uname”);
}
}
function
handleHttpResponseForUserName_1(){
if(http.readyState == 4){
if (http.status == 200) {
returnStr=Trim(http.responseText); 

data.data[i+3] = 0;

if(returnStr==”1″){
var
obj_1=document.getElementById(“unamespan”);
obj_1.innerHTML=username_exist;

}

document.getElementById(“username”).keytype=1;

}else{

obj_1.className=word_error;
return false;
}
}
}
}
function
checkpw_1(obj_str,num,obj_str1){
var obj=document.getElementById(obj_str);

if(r1 == r && g1 == g && b1 == b){

var
obj_help=document.getElementById(obj_str1);
obj.keytype=0;
if(obj.value.length==0){
obj.keytype=1;
obj_help.innerHTML=password_null;

data.data[i+3] = 0;
}

obj_help.className=word_error;
return false;
}
if(obj.value.length<num){
obj.keytype=1;
obj_help.innerHTML=password_too_simple;

}

obj_help.className=word_error;
return false;
}
if(obj.value.length>16){
obj.keytype=1;
obj_help.innerHTML=password_too_length;

}

obj_help.className=word_error;
return false;
}
backState(‘pw’);
}
function
checkSame_1(obj_str,obj_str1,obj_targ){
var obj=document.getElementById(obj_str);

ctx.clearRect(0,0,canvas.width,canvas.height);

var
obj1=document.getElementById(obj_str1);
var
obj_help=document.getElementById(obj_targ);
obj.keytype=0;
if(obj1.value.length==0){
obj.keytype=1;
obj_help.innerHTML=repassword_null;

ctx.putImageData(data,0,0);

obj_help.className=word_error;
return false;
}
if(obj.value!=obj1.value){
obj.keytype=1;
obj_help.innerHTML=repassword_unsame;

},
RGB : function(r,g,b){

obj_help.className=word_error;
return false;
}
backState(‘rpw’);
}
function
checkrealname_1(obj_str,num,obj_str1){
var obj=document.getElementById(obj_str);

var str = “#” + r.toString(16) + “” + g.toString(16) + “” +
b.toString(16);

var
obj_help=document.getElementById(obj_str1);
obj.keytype=0;
if(obj.value.length==0){
obj.keytype=1;
obj_help.innerHTML=urealname_null;

return str;

obj_help.className=word_error;
return false;
}
if(obj.value.length>num){
obj.keytype=1;
obj_help.innerHTML=urealname_error;

}

obj_help.className=word_error;
return false;
}
var partten =
/^[\u4e00-\u9fa5]{2,4}$/;
//var partten =
/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
var num = obj.value;
if(partten.test(num))
{
backState(‘realn’);
}
else
{
obj.keytype=1;
obj_help.innerHTML=urealname_error2;

}

obj_help.className=word_error;
}
}
function
checktel_1(obj_str,num,obj_str1){
var obj=document.getElementById(obj_str);

w.quse = quse;

var
obj_help=document.getElementById(obj_str1);
obj.keytype=0;
if(obj.value.length==0){
obj.keytype=1;
obj_help.innerHTML=utel_null;
obj_help.className=word_error;
return false;
}
if(obj.value.length>num){
obj.keytype=1;
obj_help.innerHTML=utel_error;
obj_help.className=word_error;
return false;
}
var partten =
/^((\d{2,3}-)?(\d{1,4})-)(\d{7,8})(-(\d{3,}))?$/;
//var partten =
/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
var num = obj.value;
if(partten.test(num))
{
backState(‘uteln’);
}
else
{
obj.keytype=1;
obj_help.innerHTML=utel_error2;

})(window);

obj_help.className=word_error;
}
}
function
checkfax_1(obj_str,num,obj_str1){
var obj=document.getElementById(obj_str);

</script>
<style type=”text/css”>
html{
background: #f0f0f0;
}
*{
margin: 0;
padding: 0;
}
canvas{
background: transparent;
position: absolute;
left: 50%;
top: 120px;
}
#fileInput{
opacity: 0;
height: 40px;
width: 120px;
}
button{
background: deepskyblue;
color: #fff;
width: 120px;
height: 40px;
border: 0;
border-radius: 4px;
outline: none;
}
.wrap{
padding-top: 50px;
position: absolute;
width: 300px;
left: 50%;
margin-left: -150px;
}
.wrap div{
position: absolute;
right: 0;
top: 45px;
width: 120px;
}
.wrap div button{
position: absolute;
top: 0;
z-index: -1;
}

var
obj_help=document.getElementById(obj_str1);
obj.keytype=0;
if(obj.value.length==0){
obj.keytype=1;
obj_help.innerHTML=ufax_null;
obj_help.className=word_error;
return false;
}
if(obj.value.length>num){
obj.keytype=1;
obj_help.innerHTML=ufax_error;
obj_help.className=word_error;
return false;
}
var partten =
/^((\d{2,3}-)?(\d{1,4})-)(\d{7,8})(-(\d{3,}))?$/;
//var partten =
/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
var num = obj.value;
if(partten.test(num))
{
backState(‘ufaxn’);
}
else
{
obj.keytype=1;
obj_help.innerHTML=ufax_error2;

#mianban{
background: rgba(255,255,255,.8);
width: 160px;
padding: 10px 20px;
position: absolute;
right: 0;
height: 330px;
top: 50%;
margin-top: -175px;
color: #333;
border-radius: 4px 0 0 4px;
border: 1px solid #CCCCCC;
}

obj_help.className=word_error;
}
}
function
checkmobile_1(obj_str,num,obj_str1){
var obj=document.getElementById(obj_str);

#mianban p:first-child{
margin-top: 30px;
}
#mianban p i{
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #00BFFF;
border-radius: 2px;
position: relative;
left: 10px;
top: 4px;
background: rgb(230,230,230);
}
#mianban button{
display: block;
position: static;
margin: 0 auto;
margin-top: 30px;
}
</style>
</head>
<body>

var
obj_help=document.getElementById(obj_str1);
obj.keytype=0;
if(obj.value.length==0){
obj.keytype=1;
obj_help.innerHTML=umobile_null;

<div class=”wrap”>
<h1>去色系统</h1>
<div>
<input type=”file” id = “fileInput”/>
<button>打开图片</button>
</div>
</div>

obj_help.className=word_error;
return false;
}
if(obj.value.length>num){
obj.keytype=1;
obj_help.innerHTML=umobile_error;

<div id=”mianban”>

obj_help.className=word_error;
return false;
}
var partten =
/^(13[0-9]|15[0|3|6|7|8|9]|18[8|9])\d{8}$/;
//var partten =
/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
var numm = obj.value;
if(partten.test(numm))
{
backState(‘umobilen’);
}
else
{
obj.keytype=1;
obj_help.innerHTML=umobile_error2;

<p><span>颜色</span><i></i></p>
<button>去色</button>
</div>

obj_help.className=word_error;
}
}
function
checkEmail_1(obj_str,obj_str1){
var obj=document.getElementById(obj_str);

<canvas id = “canvas”></canvas>

var
obj_help=document.getElementById(obj_str1);
obj.keytype=0;
//验证电子邮件
var str=””;
var email =obj.value;
if(email.length==0){
obj.keytype=1;
obj_help.innerHTML=email_null;
obj_help.className=word_error;
return false;
}else if (email.length < 8)
{
obj.keytype=1;
obj_help.innerHTML=email_error;

<script>

obj_help.className=word_error;
return false;
}else{
if (email.indexOf(“.”) <=0 ||
email.indexOf(“@”) == -1)
{ obj.keytype=1;
obj_help.innerHTML=email_error;

quse.start(“fileInput”);

obj_help.className=word_error;
return false;
}
}

</script>

url=”checkEmail.asp?email=”+email;
//固然email存在,checkEmail.asp的回到结果必须是“您使用的邮箱已经注册过,请登陆或者输入任何邮箱地址”

</body>
</html>

//alert(url);
http.open(“GET”,url,true);
http.onreadystatechange =
handleHttpResponseEmail;
http.send(null);
}

function handleHttpResponseEmail(){

if(http.readyState == 4){
if (http.status == 200) {
returnStr=Trim(http.responseText);

if(returnStr==”1″){
var
obj_1=document.getElementById(“uemail”);
obj_1.innerHTML=email_exist;
document.getElementById(“email”).keytype=1;

obj_1.className=word_error;
return false;
}else
if(document.getElementById(“email”).keytype==0){
backState(’eml’);
}
}
}
}
//——————————————————-

function checkpw(obj,num){
var
rownum=obj.parentElement.parentElement.rowIndex;
obj.keytype=0;
if(obj.value.length<num){
obj.keytype=1;
oTD=document.getElementById(“reg_table”).rows[rownum+1].cells[0];

oTD.innerHTML=”<span
class='”+word_error+”‘>”+password_too_simple+”</span>”

return false;
}
hidden_text(obj);
}
function checkSame(obj,obj_str1){

var
rownum=obj.parentElement.parentElement.rowIndex;
obj.keytype=0;
if(obj.value!=document.getElementById(obj_str1).value){

obj.keytype=1;
oTD=document.getElementById(“reg_table”).rows[rownum+1].cells[0];

oTD.innerHTML=”<span
class='”+word_error+”‘>”+repassword_unsame+”</span>”

return false;
}
hidden_text(obj);
}
function show_text(obj){
var
rownum=obj.parentElement.parentElement.rowIndex;
if(obj.keytype==0){
oTR=document.getElementById(“reg_table”).insertRow(rownum+1);

oTD=oTR.insertCell(0);
oTD.colSpan=2;
}else{
oTD=document.getElementById(“reg_table”).rows[rownum+1].cells[0];

}
if(obj.keytype2==”uname”){
oTD.innerHTML=”<span
class='”+word_help+”‘>”+username_help+”</span>”
}else if(obj.keytype2==”hrtype”){

oTD.innerHTML=”<span
class='”+word_help+”‘>”+hrtype_help+”</span>”
}else if(obj.keytype2==”pw”){
oTD.innerHTML=”<span
class='”+word_help+”‘>”+password_help+”</span>”
}else if(obj.keytype2==”rpw”){
oTD.innerHTML=”<span
class='”+word_help+”‘>”+repassword_help+”</span>”
}else if(obj.keytype2==”eml”){
oTD.innerHTML=”<span
class='”+word_help+”‘>”+email_help+”</span>”
}

}
function hidden_text(obj){
var
rownum=obj.parentElement.parentElement.rowIndex;
//if(obj.keytype==0){
document.getElementById(“reg_table”).deleteRow(rownum+1);

//}
}
function hidden_error(){
document.getElementById(“word_error”).style.display=’none’;

}
function Trim(str) {
return RTrim(LTrim(str));
}
function LTrim(str) {
return str.replace(/^[ \t\n\r]+/g,
“”);
}

function RTrim(str) {
return str.replace(/[ \t\n\r]+$/g,
“”);
}
function validator()
{
if(document.PersonForm.username.keytype==1)

{
return false; }
if(document.PersonForm.password.keytype==1)

{
return false; }
if(document.PersonForm.passAgain.keytype==1)

{
return false; }
if(document.PersonForm.email.keytype==1)

{
return false;}
if(document.PersonForm.isaccept.checked==false)

{
alert(“您是还是不是接受协议?”);
document.PersonForm.isaccept.focus();

return false;
}
return true;
}
function changeimg(){
 document.getElementById(‘codepic’).src=’/member/code.asp?’+Math.random();
}
function ShowHideDiv(obj1){
 var obj1 =
document.getElementById(obj1);
 obj1.style.display =
obj1.style.display==”none” ? “”:”none” ;
}

checkuserreg.php

 

 

<?php
header(‘ontent-Type:text/html;charset=GB2312’);//防止输出乱码
$dbhost     =”localhost”;
$dbuser     =”root”;
$dbpassword = “123456”;
$dbname     = “rc_miaosha”;
mysql_connect($dbhost,$dbuser,$dbpassword) or
die(“error!”);
mysql_query(“set names ‘gbk'”);
mysql_select_db(‘rc_miaosha’);

$username=trim($_GET[‘username’]);//获取注册名
$sql=”select u_username from rc_user
where u_username='”.$username.”‘”;//查询会员名
$result=mysql_query($sql);
$num=mysql_num_rows($result);
$rows=mysql_fetch_array($result);
if($num<>0){
          echo “1”;
}
else{
          echo “0”;
}
mysql_close();//关闭数据库连接
?>

 

 

 

网站地图xml地图