正則表達式

var str='test'

var reg=/^test$/

var result=reg.test          (str)

//                       需要檢測的目標

console.log(result)               //ture

Canvas

什麼是Canvas

<canvas>是 HTML5 新增的元素，可使用JavaScript腳本來繪製圖形。

<canvas是一個矩形區域，您可以控制其每一像素。

引入Canvas

<canvas id="canvas" width="300" height="300"></canvas>

<canvas> 看起來和 <img> 元素很相像，唯一的不同就是它並沒有 src 和 alt 屬性。實際上，<canvas> 標簽只有兩個屬性—— width 和 height，並且這些屬性都是可選的。

width 和 height 屬性

當沒有設置寬度和高度的時候，canvas 會初始化寬度為300像素和高度為150像素。該元素可以使用CSS來定義大小，但在繪製時圖像會伸縮以適應它的框架尺寸：如果CSS的尺寸與初始畫布的比例不一致，它會出現扭曲。

*註意*: 如果你繪製出來的圖像是扭曲的, 嘗試在<canvas>的屬性中明確規定寬和高，而不是使用CSS。

相容性

某些較老的瀏覽器（尤其是IE9之前的IE瀏覽器）或者文本瀏覽器不支持HTML元素"canvas"，在這些瀏覽器上會把<canvas>標簽內部的內容顯示出來，因此我們可以在這些不支持<canvas>的瀏覽器上提供一些替代內容，而支持<canvas>的瀏覽器將會忽略在容器中包含的內容，並且只是正常渲染canvas。

<canvas id="myCanvas" width="150" height="150">

  如果您的瀏覽器不支持Canvas，那麼您將看到本行文字

</canvas>

</canvas> 標簽不可省

與 <img> 元素不同，<canvas> 元素需要結束標簽(</canvas>).如果結束標簽不存在，則文檔的其餘部分會被認為是替代內容，將不會顯示出來。

獲取繪圖上下文(the rendering context)

canvas起初是空白的.如果想要對canvas進行一些操作，那麼則需要獲取canvas的繪圖上下文對象。<canvas> 元素有一個做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數，上下文的格式.對於2D圖像而言，這個格式參數是"2d"。

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

如果在不支持<canvas>的瀏覽器中運行了上述代碼，會拋出一個錯誤.所以在我們獲取繪圖上下文對象之前，應該先檢查一下瀏覽器對該特性的支持情況。

var canvas = document.getElementById('tutorial');

​

if (canvas.getContext){

  var ctx = canvas.getContext('2d');

  // drawing code here

} else {

  // canvas-unsupported code here

}

基本繪圖操作

和Windows操作系統自帶的畫圖程式一樣，Canvas的兩種基本繪圖操作是填充和描邊。填充，就是用指定的樣式（顏色、漸變或圖像）填充圖形；描邊，就是只在圖形的邊緣畫線。填充和描邊的樣式分別取決於兩個屬性：fillStyle和strokeStyle。這兩個屬性的值可以是字元串、漸變對象或模式對象，而且它們的預設值都是"#000000"。如果為它們指定表示顏色的字元串值，可以使用 CSS 中指定顏色值的任何格式，包括顏色名、十六進位碼、 rgb、rgba、hsl 或 hsla。

繪製矩形

矩形是唯一一種可以直接在 2D 上下文中繪製的形狀.與矩形有關的方法包括 fillRect()、 strokeRect() 和 clearRect()。這三個方法都能接收 4 個參數：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度。這些參數的單位都是像素。

填充矩形

fillRect(x, y, width, height)

繪製矩形描邊

strokeRect(x, y, width, height)

清除矩形

該方法的功能類似於Windows系統中畫圖程式的橡皮擦，會將指定矩形矩形區域中的所有內容全部清除。

clearRect(x, y, width, height)

繪製路徑

如果要繪製矩形以外的形狀，則需要自定義繪製路徑。2D 繪製上下文支持很多在畫布上繪製路徑的方法。要繪製路徑，首先必須調用 beginPath()方法，表示要開始繪製新路徑。然後，再通過調用下列方法來實際地繪製路徑。

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

創建了路徑後，接下來有幾種可能的選擇。如果想繪製一條連接到路徑起點的線條，可以調用 closePath()。如果路徑已經完成，你想用 fillStyle 填充它，可以調用 fill() 方法。另外，還可 以調用 stroke() 方法對路徑描邊，描邊使用的是 strokeStyle。最後還可以調用 clip()，這個方法可以在路徑上創建一個剪切區域。

繪製一個簡易時鐘

var canvas = document.getElementById("canvas");

//確定瀏覽器支持元素 

if (canvas.getContext){

    var context = canvas.getContext("2d");

​

    //開始路徑

    context.beginPath();

    //繪製外圓

    context.arc(100, 100, 99, 0, 2 * Math.PI, false);

    //繪製內圓

    context.moveTo(194, 100);

    context.arc(100, 100, 94, 0, 2 * Math.PI, false);

    //繪製分針

    context.moveTo(100, 100);

    context.lineTo(100, 15);

    //繪製時針

    context.moveTo(100, 100);

    context.lineTo(35, 100);

    //描邊路徑

    context.stroke();

}

繪製文本

繪製文本主要有兩個方法：fillText() 和 strokeText()。這兩個方法都可以接收 4 個參數：要繪製的文本字元串、x 坐標、y 坐標和可選的最大像素寬度。

而繪製出來文本的樣式，由下麵3個屬性決定：

font

表示文本樣式、大小及字體，用 CSS 中指定字體的格式來指定，例如"10px Arial"。

textAlign

表示文本對齊方式。可能的值有 "start"、"end"、"left"、"right" 和 "center"。建議使用 "start" 和 "end"，不要使用 "left" 和 "right"，因為前兩者的意思更穩妥，能同時適合從左到右和從右到左顯示（閱讀）的語言。

textBaseline

表示文本的基線。可能的值有 "top"、"hanging"、"middle"、"alphabetic"、 "ideographic" 和 "bottom"。

context.font = 'bold 14px Arial';

context.textAlign = 'center';

context.textBaseline = 'middle';

context.fillText('hello, world', 100, 100);