?

context . restore() //彈出堆最上面保存的繪圖狀態(tài)?

context . save() //在繪圖狀態(tài)堆上保存當前繪圖狀態(tài)?

繪圖狀態(tài)可以看作當前畫面應用的所有樣式和變形的一個快照。而狀態(tài)的應用則可以避免繪圖代碼的過度膨脹。

轉換(Transformations)?

context . rotate(angle) ?//按給定的弧度旋轉,按順時針旋轉?

context . scale(x, y) //按給定的縮放倍率縮放，1.0,為不變

context . setTransform(m11, m12, m21, m22, dx, dy)//重設當前的轉換到

context . transform(m11, m12, m21, m22, dx, dy) //矩陣變換，結果等于當前的變形矩陣乘上

context . translate(x, y) //可以理解為偏移，向 x,y方向偏移指定的量,其用來移動 Canvas 的原點到一個指定的值

?

合成（Compositing）

context . globalAlpha [ = value ] //0-1.0之間的數(shù)據(jù)，設定圖像的透明度

context . globalCompositeOperation [ = value ] //設定重疊圖像的覆蓋方式，可以設定為(注，值大小寫敏感)：

?

顏色和風格

context . fillStyle [ = value ] //返回填充形狀的當前風格，能被設置以用來改變當前的填充風格，其值可以是CSS顏色字串，也可以是CanvasGradient或者 CanvasPattern 對象，非法的值將被忽略。

context . strokeStyle [ = value ] //返回當前描繪形狀的風格，能被設置，其值同上。

gradient . addColorStop(offset, color) //在給定偏移的地方增加一個漸變顏色點，偏移量取值范圍為 0-1.0 之間，否則產生一個 INDEX_SIZE_ERR的異常，color 為 DOM 字符串，如果不能解析，則拋出一個 SYNTAX_ERR的異常

gradient = ?context . ?createLinearGradient(x0, ?y0,?x1, y1) //建立一個線性漸變，如果任何一個參數(shù)不是有限值，則拋出一個NOT_SUPPORTED_ERR的異常。

gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1) //建立一個徑向漸變，如果任何一個參數(shù)不是有限值，則拋出一個NOT_SUPPORTED_ERR的異常。假如 r0或 r1 為負值，則拋出 INDEX_SIZE_ERR的異常。

?

pattern = context . createPattern(image, repetition)

本方法用指定的圖像和重復方向建立一個畫布圖案對象，image 參數(shù)可為 img,canvas,video 元素中的任一個，如果不滿足此條件，則拋出TYPE_MISMATCH_ERR 異常，如果圖片編碼未知或沒有圖像數(shù)據(jù)，則拋出INVALID_STATE_ERR 異常；

第二個參數(shù)可以是下列值：?

repeat ? ? ? ? 默認參數(shù)，如果為空，則為此參數(shù)，表示兩個方向重復?
repeat-x ? ? ?僅水平重復?
repeat-y ? ? ?僅垂直重復?
no-repeat ? ? 不重復

?

?

?

?

canvas的狀態(tài)?
每個上下文都包含一個繪圖狀態(tài)的堆，繪圖狀態(tài)包含下列內容：?
$ 當前的 transformation matrix.?
$ 當前的 clipping region?
$ 當前的屬性值：fillStyle, font, globalAlpha,?
globalCompositeOperation, lineCap, lineJoin,?
lineWidth, miterLimit, shadowBlur, shadowColor,?
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,?
textBaseline?
注：當前 path 和當前 bitmap 不是繪圖狀態(tài)的一部分，當前 path 是持久
存在的，僅能被 beginPath()復位，當前 bitmap 是 canvas 的屬性，而非繪
圖上下文。

轉載于:https://www.cnblogs.com/aimyfly/p/3786149.html

總結

以上是生活随笔為你收集整理的Canvas 属性,方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。