学习笔记3

### 1、表单的对象事件 ###
给一些数据规定必定的规则，例如用户名字符长度不小于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结束，而中括号了的^表明，除了括号里的其他字符均可以进行匹配

##3、画布（canvas）##
canvas是HTML5新增的元素，可使用js来绘制图形。

canvas能够设置宽高，默认值为300*150（若是绘制出来的图像是扭曲的，尝试在canvas的属性中明确规定宽高，而不是使用css）

某些较老的浏览器中并不支持canvas，在这些浏览器中，会把标签内部的内容显示出来，而支持的浏览器不会显示，而且只是正常渲染canvas，由此咱们能够在低版本的浏览器中显示提示（你的浏览器版本太低，请升级浏览器）

### 一、获取绘图上下文 ###
Canvas的两种基本绘图操做是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。填充和描边的样式分别取决于两个属性：fillStyle和strokeStyle。这两个属性的值能够是字符串、渐变对象或模式对象

### 二、绘制矩形 ###
填充矩形
fillRect(x, y, width, height)
绘制矩形描边

strokeRect(x, y, width, height)
清除矩形

该方法的功能相似于Windows系统中画图程序的橡皮擦，会将指定矩形矩形区域中的全部内容所有清除。
clearRect(x, y, width, height)

### 三、绘制路径 ###
* 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() 所绘制的独立的形状。