Canvas快速入門知識點

kkkkuuuu發表於2017-12-22
Canvas

基本用法

ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x, y)
ctx.stroke()
複製程式碼

圖形

  • 折線
  • 方形
ctx.fillRect()
ctx.fillRect(25,25,25,25);
複製程式碼

繪製形狀

  • 圓

新增樣式和顏色

色彩

ctx.fillStyle = color  //設定圖形的填充顏色

ctx.strokeStyle = color     //設定圖形輪廓的顏色
複製程式碼

設定了 strokeStyle 或者 fillStyle 的值，那麼這個新值就會成為新繪製的圖形的預設值。

透明度

ctx.globalAlpha = value;  //數字在 0.0（完全透明）和 1.0（完全不透明）之間
複製程式碼

線型

lineWidth = value
複製程式碼

設定線條寬度。

lineCap = type
複製程式碼

設定線條末端樣式。它可以為下面的三種的其中之一：butt，round 和 square。預設是 butt。

lineJoin = type
複製程式碼

設定線條與線條間接合處的樣式。它可以是這三種之一：round, bevel 和 miter。預設是 miter。

miterLimit = value
複製程式碼

限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。

getLineDash()
複製程式碼

返回一個包含當前虛線樣式，長度為非負偶數的陣列。

setLineDash(segments)
複製程式碼

設定當前虛線樣式。 lineDashOffset = value 設定虛線樣式的起始偏移量

漸變

新建一個 canvasGradient 物件，並且賦給圖形的 fillStyle 或 strokeStyle 屬性。

  • createLinearGradient(x1, y1, x2, y2)方法接受 4 個引數，表示漸變的起點 (x1,y1) 與終點 (x2,y2)。

  • createRadialGradient(x1, y1, r1, x2, y2, r2) 方法接受 6 個引數，前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓，後三個引數則定義另一個以 (x2,y2) 為原點，半徑為 r2 的圓。

建立出 canvasGradient 物件後，我們就可以用 addColorStop 方法給它上色了。

  • gradient.addColorStop(position, color) addColorStop 方法接受 2 個引數，position 引數必須是一個 0.0 與 1.0 之間的數值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現在正中間。color 引數必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）。

圖案樣式

createPattern(image, type)
複製程式碼

該方法接受兩個引數。Image 可以是一個 Image 物件的引用，或者另一個 canvas 物件。Type 必須是下面的字串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

陰影

shadowOffsetX = float
shadowOffsetY = float
複製程式碼

shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們預設都為 0。

shadowBlur = float
複製程式碼

shadowBlur 用於設定陰影的模糊程度，其數值並不跟畫素數量掛鉤，也不受變換矩陣的影響，預設為 0。

shadowColor = color
複製程式碼

shadowColor 是標準的 CSS 顏色值，用於設定陰影顏色效果，預設是全透明的黑色。

填充規則

繪製文字

文字

fillText(text, x, y [, maxWidth])
複製程式碼

在指定的(x,y)位置填充指定的文字，繪製的最大寬度是可選的.

strokeText(text, x, y [, maxWidth])
複製程式碼

在指定的(x,y)位置繪製文字邊框，繪製的最大寬度是可選的

  • font = value 當前我們用來繪製文字的樣式. 這個字串使用和 CSS font 屬性相同的語法. 預設的字型是 10px sans-serif。

  • textAlign = value 文字對齊選項. 可選的值包括：start, end, left, right or center. 預設值是 start。

  • textBaseline = value 基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。預設值是 alphabetic。

  • direction = value 文字方向。可能的值包括：ltr, rtl, inherit。預設值是 inherit。

先進的文字測量

measureText()
複製程式碼

將返回一個 TextMetrics物件的寬度、所在畫素，這些體現文字特性的屬性。

使用影象

獲得需要繪製的圖片

anvas的API可以使用下面這些型別中的一種作為圖片的源：

  • HTMLImageElement 這些圖片是由Image()函式構造出來的，或者任何的Canvas快速入門知識點元素

  • HTMLVideoElement 用一個HTML的 <video>元素作為你的圖片源，可以從視訊中抓取當前幀作為一個影象

  • HTMLCanvasElement 可以使用另一個 <canvas> 元素作為你的圖片源。

  • ImageBitmap 這是一個高效能的點陣圖，可以低延遲地繪製，它可以從上述的所有源以及其它幾種源中生成。

這些源統一由CanvasImageSource型別來引用。

有幾種方式可以獲取到我們需要在canvas上使用的圖片。

使用相同頁面內的圖片

  • document.images集合

  • document.getElementsByTagName()方法

  • 如果你知道你想使用的指定圖片的ID，你可以用document.getElementById()獲得這個圖片

使用其它域名下的圖片

...未完待續

相關文章