canvas的繪製模型
在向canvas之上繪圖形或影象時，瀏覽器要按照如下步驟操作：
1>將圖形或影象繪製到乙個無限大的透明點陣圖中，在繪製時遵從當前的填充模式、描邊模式以及線條樣式。
2>將圖形或影象的陰影繪製到另外一幅點陣圖中，在繪製時使用當前繪圖環境的陰影設定。
3>將陰影中每乙個畫素的alpha分量乘以繪圖環境物件的globalalpha屬性值。
4>將繪有陰影的點陣圖與經過剪輯區域剪下過的canvas進行影象合成。在操作時使用當前的合成模式引數。
5>將圖形或影象的每乙個畫素顏色分量，乘以繪圖環境物件的globalalpha屬性值 。
6>將繪有圖形或影象的點陣圖，合成到當前經過剪輯區域蕭索的canvas點陣圖之上，在操作時使用當前的合成操作符。
只有在啟用陰影效果時才會執行第2~4步。
矩形的清除、描邊與填充
1、clearrect(double x, double y, double w, double y);
將指定矩形與當前剪輯區域相交範圍內所有畫素清除。
在預設情況下，剪輯區域的大小就是整個canvas，所以，如果你沒有改動剪輯區域的話，那麼在引數所指範圍內的所有畫素都會被清除
所謂「清除畫素」，指的是將其顏色設定為全透明的黑色。這在實際效果上就等見死不救「擦除」或者「清除」了某個畫素，從而使得canvas的背景可以透過該畫素顯示出來。
2、strokerect(double x, double y, double w, double h);
使用如下屬性，為指定的矩形描邊
1）strokestyle
2) linewidth
3) linecap
4) linejoin
5) miterlimit
如果寬度或高度有乙個為0的話，那麼該方法將會分別繪製一條豎線或橫線。如果兩者都是0，則不會繪製任何東西
3、fillrect(double x, double y, double w, double h);
使用fillstyle屬性填充指定的矩形。如果寬度或高度是0的話，那麼該方法會以為呼叫者辦了一傻事，所以它不會進行任何繪製。
css3顏色規範中說道：之所以要增加對hsl格式的支援，是因為以rgb方式來指定顏色，主要是二個缺陷：
第一、它是以硬體為導向的。這種顏色的形式，是基於「陰極射線管」的
第二、它不直觀
hsl格式也有三個分量分別是：色相、飽和度、亮度。
hsl顏色可以通過乙個顏色輪盤來選取。在輪盤中，紅色位於0度角（同時也位於360度角），綠色位於120度角，而藍色則位於240度角。
漸變色api
1、canvasgradient creatlineargradient(double x0, double y0, double x1, double y1);
建立線性漸變。傳入該方法的引數表示漸變的兩個端點。該方法返回乙個canvasgradient例項，可以通過canvasgradient.addcolorstop()方法來向該漸變色增加顏色停止點。
2、canvasgradient createradialgradient(double x0, double y0, double r0, double x1, double y1, double r1);
建立放射漸變。該方法的引數代表位於圓錐形漸變區域兩端的圓形。與createlineargradient方法一樣，該方法也返回乙個canvasgradient例項。
createpattern()方法使用
createpattern createpattern(htmlimageelement | htmlcanvaselement | htmlvideoelement image, domstring repeatition);
建立乙個可以用來在canvas之中對圖形和文字進行描邊與填充的圖案。該方法的第乙個引數指定了圖案所用的影象，它可以是image元素、canvas元素或者video元素。第二個引數告訴瀏覽器，它對影象進行描邊或填充時，應該如何重複該圖案。這個引數的有效取值是repeat、repeat-x、repeat-y及no-repeat;
開啟與禁用陰影效果
根據canvas規範，瀏覽器只應在符合如下情形時，才去繪製陰影
1）指定了乙個非透明的shadowcolor屬性值;
2）在其餘的三個屬性shaodowblur、shadowoffsetx與shadowoffsety之中，至少有乙個屬性不是0.
陰影效果的繪製可能很耗時
為了繪製陰影，瀏覽器需要將陰影先渲染到乙個輔助的點陣圖之中，最後這輔助點陣圖中的內容會與螢幕上canvas之中的內容進行影象合成。由於使用了這種輔助位圖，所以繪製陰影可能是一項很的操作。
canvasrenderingcontext2d之中與路徑有關的方法
1、arc(double x, double y, double startangle, double endangle, boolean counter-clockwise)；
在當前路徑中增加一段表示圓弧或圓形的子路徑。與rect()方法不同，可以通過乙個boolean引數來控制該段子路徑的方向。如果此引數是true，那麼arc()建立的子路徑就是順時針的，否則就是逆時針的。如果在呼叫方法時已經有了其他的子路徑存在，以arc()方法則會用一條線段把已有的路徑的終點與這段圓弧路徑的起點連線起來。
2、beginpath()；
將當前路徑之中的所有子路徑都清除掉，以此來重置當前路徑。
3、closepath()；
顯示地封閉某段開放路徑。該方法用於封閉圓弧路徑以及由貝母或線段所建立的開放路徑。
4、fill()；
使用fillstyle對當前路徑的內部進行填充；
5、rect(double x, double y, double w, double h)；
在座標(x,y)處建立乙個寬度為width、高度為height的矩形子路徑。該子路徑一定是封閉的，而且總是按逆時針方向來建立的。
6、stroke()；
使用strokestyle對當前路徑進行描繪邊框。
7、arcto(double x1, double y1, double x2, double y2, double radius);
參考(x1, y1)與(x2, y2)兩個點，建立一條以radius為半徑的圓弧路徑。該圓弧與當前點到(x1, y1)點的連線相切，同時也與(x1, y1)到(x2, y2)的連線相切。
與arc()方法一樣，如果在呼叫該方法時，當前路徑中有子路徑存在，瀏覽器將會從子路徑終點向圓弧路徑的起點處畫一條線段。
moveto()與lineto()方法的用法
1、moveto(x, y)；
向當前路徑中增加一條子路徑，該子路徑只包含乙個點，就是由引數傳入的那個點，該方法並不會從當前路徑中清除任何子路徑；
2、lineto(x, y);
如果當前路徑中沒有子路徑，那麼這個方法的行為與moveto()方法一樣。它會建立一條新的子路徑，其中包含了經由引數所傳入的那個點。如果當前路徑 中存在於路徑，該方法會將你所指定的那個點加入子路徑中。
C 基礎知識之二
c 基礎知識之二 1 靜態字段 靜態成員 被類的所有例項共享，對其改變，對所有例項都可見。2 宣告為靜態的有 字段 方法 屬性 建構函式 運算子 事件。3 常量與靜態量不同 常量沒有自己的儲存位置，在編譯時被編譯器替換。4 類屬性與類字段不同 屬性是乙個函式成員，它不為資料儲存分配記憶體並執行 5 ...
Canvas基礎知識積累
id canvas canvas var canvas document.getelementbyid canvas var context canvas.getcontext context就是canvas物件，接下來都是對其進行操作 設定width和height canvas.width 102...
linux shell指令碼基礎知識之二
一 shell字串 字串是shell程式設計中最常用最有用的資料型別 除了數字和字串，也沒啥其它型別好用了 字串可以用單引號，也可以用雙引號，也可以不用引號。單雙引號的區別跟php類似。str this is a string 單引號字串的限制 your name qinjx str hello,i...