學習筆記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() 所繪製的獨立的形狀。