学习笔记3
### 一、表单的对象事件 ###
给一些数据规定一定的规则，例如用户名字符长度不小于4，密码大于6位等。
`(function(){
var newForm = document.getElementById('form');
var uersInput = document.getElementById('uersname');
var padInput = document.getElementById('pad');
var querenInput = document.getElementById('queren');
var birthInput = document.getElementById('birth');
var emailInput = document.getElementById('email');
newForm.addEventListener('submit',function(event){
var uersname = uersInput.value;
var pad = padInput.value;
var queren = querenInput.value;
var birth = birthInput.value;
var email = emailInput.value;
var birthReg = /^(19|20)[0-9]\d-(01|02|03|04|05|06|07|08|09|10|11|12)-\d{2}$/;
var emailReg = /^[A-z0-9_]{3,12}@[A-z0-9]{2,12}(\.com|\.cn|\.com\.cn)$/;
console.log(uersname,pad,queren);
if(uersname.length < 4 || pad.length < 6 || pad !== queren || !birthReg.test(birth)|| !emailReg.test(email)){
event.preventDefault();
alert('您输入的数据有误');
}
},false)
})();`
正则表达式：是对字符串执行模式匹配
正则表达式其中一部分满足，就匹配成功
`var str = 'test;
var reg = /^t[^0-9]st$/;
var result = reg.test(str)`
上述代码中外面的^代表开头只能以t开头，$代表只能以t结束，而中括号了的^代表，除了括号里的其余字符都可以进行匹配
##三、画布（canvas）##
canvas是HTML5新增的元素，可以使用js来绘制图形。
canvas可以设置宽高，默认值为300*150（如果绘制出来的图像是扭曲的，尝试在canvas的属性中明确规定宽高，而不是使用css）
某些较老的浏览器中并不支持canvas，在这些浏览器中，会把标签内部的内容显示出来，而支持的浏览器不会显示，并且只是正常渲染canvas，由此我们可以在低版本的浏览器中显示提示（你的浏览器版本过低，请升级浏览器）
### 1、获取绘图上下文 ###
Canvas的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。填充和描边的样式分别取决于两个属性：fillStyle和strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象
### 2、绘制矩形 ###
填充矩形
fillRect(x, y, width, height)
绘制矩形描边
strokeRect(x, y, width, height)
清除矩形
该方法的功能类似于Windows系统中画图程序的橡皮擦，会将指定矩形矩形区域中的所有内容全部清除。
clearRect(x, y, width, height)
### 3、绘制路径 ###
* arc(x, y, radius, startAngle, endAngle, counterclockwise)
以(x,y)为圆心绘 制一条弧线，弧线半径为 radius，起始和结束角度（用弧度表示）分别为 startAngle 和 endAngle。最后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算，值为 false 表示按顺时针方向计算。
* arcTo(x1, y1, x2, y2, radius)
从上一点开始绘制一条弧线，到(x2,y2)为止，并且以 给定的半径 radius 穿过(x1,y1)。
* bezierCurveTo(c1x, c1y, c2x, c2y, x, y)
从上一点开始绘制一条三次方贝塞尔曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
* lineTo(x, y)
从上一点开始绘制一条直线，到(x,y)为止。
* moveTo(x, y)
将绘图游标移动到(x,y)，不画线。
* quadraticCurveTo(cx, cy, x, y)
从上一点开始绘制一条二次贝塞尔曲线，到(x,y)为止，并且以(cx,cy)作为控制点。
* rect(x, y, width, height)
从点(x,y)开始绘制一个矩形，宽度和高度分别由 width 和 height 指定。这个方法绘制的是矩形路径，而不是 strokeRect() 和 fillRect() 所绘制的独立的形状。
