微信小程序之畫布

1. canvas 標簽默認寬度300px、高度225px
2. 同一頁面中的 canvas-id 不可重復，如果使用一個已經出現過的 canvas-id，該 canvas 標簽對應的畫布將被隱藏並不再正常工作

屬性名	類型	默認值	說明
canvas-id	String		canvas 組件的唯一標識符
disable-scroll	Boolean	false	當在 canvas 中移動時，禁止屏幕滾動以及下拉刷新
bindtouchstart	EventHandle		手指觸摸動作開始
bindtouchmove	EventHandle		手指觸摸后移動
bindtouchend	EventHandle		手指觸摸動作結束
bindtouchcancel	EventHandle		手指觸摸動作被打斷，如來電提醒，彈窗
bindlongtap	EventHandle		手指長按 500ms 之后觸發，觸發了長按事件后進行移動不會觸發屏幕的滾動
binderror	EventHandle		當發生錯誤時觸發 error 事件，detail = {errMsg: 'something wrong'}

實例：

  <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>

　　js：

//index.js
//獲取應用實例
var app = getApp()
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {

    // 使用 wx.createContext 獲取繪圖上下文 context
    var context = wx.createContext()
    // 設置邊框顏色
    context.beginPath()        
    context.setStrokeStyle("red")
    context.setLineWidth(2)
    context.rect(50, 0, 200, 200)
    context.stroke()
    context.closePath();

    context.beginPath();
    // 設置陰影setShadow(x偏移,y偏移,模糊度0-100,"blue")
    context.setShadow(10,-10,2,"blue")

    context.setStrokeStyle("green")
    context.setLineWidth(2)
   
    context.moveTo(210, 100)
    context.arc(150, 100, 60, 0, 2 * Math.PI, true)

    context.moveTo(190, 100)
    context.arc(150, 100, 40, 0, Math.PI, false)

    context.moveTo(135, 80)    
    context.arc(130, 80, 5, 0, 2 * Math.PI, true)

    context.moveTo(175, 80)
    context.arc(170, 80, 5, 0, 2 * Math.PI, true)

    context.stroke()

    // 調用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪制，通過 actions 指定繪制行為
    wx.drawCanvas({
      canvasId: 'firstCanvas',
      actions: context.getActions() // 獲取繪圖動作數組
    })
)}

效果如下圖　

　

具體方法：

wx.createCanvasContext(canvasID)

指定canvasID, 創建canvas繪圖的上下文

setFillStyle（“color”）

設置填充色

setStrokeStyle

設置邊框顏色

setShadow

設置陰影

offsetX	陰影相對於形狀在水平方向的偏移
offsetY	陰影相對於形狀在豎直方向的偏移
blur	陰影的模糊級別（取值范圍0-100）
color	陰影的顏色

createLinearCradient（x0, y0, x1, y1）

創建一個線性的漸變顏色，使用addColorStop(),指定漸變點，至少需要兩個漸變點

x0, y0, x1, y1分別代表起點的坐標， 終點的坐標

createCircularGradient（x, y, r）

創建一個圓形的漸變顏色 ，起點在圓心，終點在圓環，需要使用addColorStop(),來指定漸變點，至少需要兩個漸變點

x, y, r,分別代表圓心的坐標，圓的半徑

addColorStop（stop,color）

創建一個顏色的漸變點

小於最小stop的部分會按照最小的stop的顏色來渲染，同樣，大於最大stop的部分會按照最大stop的color來渲染

stop表示漸變點在起點和終點中的位置，取值范圍是0-1,color表示漸變點的顏色

setLineWidth(2)

設置線條的寬度

lineWidth 線條的寬度，單位是px

setLineCap="round"

設置線條的端點樣式

lineCap 線條的結束端點樣式,取值范圍是butt, round, square

setLineJoin="round"

設置線條的交點樣式

lineJoin 線條的結束的交點樣式 ，取值范圍是 bevel, round, miter

setMiterLImit=5

設置最大斜接長度， 指的是在兩條線交匯處內角和外角之間的距離,最大值是10

當setLineJoin()為miter時候，才有效

超過最大傾斜長度時候，連接處將以lineJoin為bevel來顯示

rect（X，Y，寬度，高度）;

創建一個矩形

需要使用fill(), stroke()方法將矩形真正的畫到canvas中

x, y, width, height分別表示矩形的左上角坐標， 矩形的寬度，高度

fillRect(x,y,width,height);

填充一個矩形，參數同rect

strokeRect(x,y,width,height);

畫一個矩形（非填充）參數同: rect

clearRect(x,y,width,height);

清除畫布上該矩形區域內的內容，參數同rect

fill()

對當前路徑中的內容進行填充，

如果當前路徑沒有閉合，fil()方法會將起點和終點進行連接，然后填充

fill()填充的路徑是從beginPath()開始計算，但是不會將fillRect()包含進去

stroke()

畫出當前路徑的邊框

storke() 描繪的路徑是從beginPath()開始計算，但是不會將fillRect()包含進去

beginPath()

開始創建一個路徑，需要調用fill或者stroke才會使用路徑進行填充或者描邊

在最開始的時候相當於調用了一次 beginPath()

同一個路徑中多次setFillStyle() , setStrokeStyle(), setLineWidth()等設置，以最后一次設置為准

closePath()

關閉一個路徑

關閉路徑會連接起點和終點

如果關閉路徑后沒有調用fill() ,stroke()並開啟新的路徑， 之前的路徑不會被渲染

moveTo(x,y)

把路徑移動到畫布中的指定點，不創建線條

x, y表示目標位置的x坐標，y坐標

lineTo(x,y)

lineTo方法增加一個新點， 然后創建 一條從上次指定點到目標點的線

arc(x,y,r,sAngle,eAngle,counterclockwise);

畫一條弧線

創建一個圓可以用arc()方法指定起始弧度 為0， 終止弧度為 2*Math.PI

x, y, r 表示圓心的坐標， r表示圓的半徑

sAngle 表示起始弧度， eAngle表示終止弧度

counterclockwise 表示指定的弧度方向是逆時針還是順時針

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

創建三次方貝塞爾曲線路徑

曲線的起始點為路徑中前一個點

cp1x, cp1y, cp2x, cp2y表示第一個，第二個貝塞爾控制點的坐標

x, y表示結束點的坐標

quadraticCurveTo(cpx,cpy,x,y);

定義二次貝塞爾曲線路徑

曲線的起始點為路徑中前一個點

cpx, cpy, x, y分別表示貝塞爾控制點的坐標， 結束點的坐標

scale(scalewidth,scaleheight);

調用scale方法，創建的路徑坐標會被縮放

調用scale方法后， 之后創建的路徑的坐標也會被縮放

scaleWidth, scaleHeight橫縱坐標縮放的倍數

scalewidth	縮放當前繪圖的寬度（1=100%，0.5=50%，2=200%，依次類推）。
scaleheight	縮放當前繪圖的高度（1=100%，0.5=50%，2=200%，依次類推）。

rotate(angle)

以原點為中心， 順時針旋轉當前坐標軸

多次調用rotate， 旋轉的角度會疊加

原點可以使用translate方法修改

rotate 旋轉角度，角度使用弧度計數（degrees * Math.PI/180 , degrees范圍是0~360)

translate(x,y);

對當前坐標系的原點(0,0)進行變換， 默認的坐標系原點為頁面左上角

x,y表示水平坐標平移量， 豎直坐標平移量

setFonSize

設置字體的字號

fontSize表示字體的字號

fillText（文字，X，Y，了maxWidth）

在畫布上繪制被填充的文本

text表示在畫布上輸出的文本，

x, y表示繪制文本的左上角x的坐標位置

drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

繪制圖像，圖像保持原始尺寸

imageResource 表示繪制的圖片資源

x, y, width, height表示圖像左上角坐標， 圖像寬度和圖像高度

setGlobalAlpha

設置全局畫筆透明度

alpha 透明度，數值為0~1

save

保存當前的繪圖上下文

restore

恢復之前保存的繪圖上下文

draw

將之前在繪圖上下文中的描述（路徑，變形，樣式）畫到canvas中

繪圖上下文需要由wx.createCanvasContext(canvasID)來創建

reserve， 表示是否接着上一次繪制，選值為true, false

 以下是h5的canvas標簽屬性，可做參考 

顏色、樣式和陰影

屬性	描述
fillStyle	設置或返回用於填充繪畫的顏色、漸變或模式。
strokeStyle	設置或返回用於筆觸的顏色、漸變或模式。
shadowColor	設置或返回用於陰影的顏色。
shadowBlur	設置或返回用於陰影的模糊級別。
shadowOffsetX	設置或返回陰影與形狀的水平距離。
shadowOffsetY	設置或返回陰影與形狀的垂直距離。

 

方法	描述
createLinearGradient()	創建線性漸變（用在畫布內容上）。
createPattern()	在指定的方向上重復指定的元素。
createRadialGradient()	創建放射狀/環形的漸變（用在畫布內容上）。
addColorStop()	規定漸變對象中的顏色和停止位置。

線條樣式

屬性	描述
lineCap	設置或返回線條的結束端點樣式。
lineJoin	設置或返回兩條線相交時，所創建的拐角類型。
lineWidth	設置或返回當前的線條寬度。
miterLimit	設置或返回最大斜接長度。

矩形

方法	描述
rect()	創建矩形。
fillRect()	繪制"被填充"的矩形。
strokeRect()	繪制矩形（無填充）。
clearRect()	在給定的矩形內清除指定的像素。

路徑

方法	描述
fill()	填充當前繪圖（路徑）。
stroke()	繪制已定義的路徑。
beginPath()	起始一條路徑，或重置當前路徑。
moveTo()	把路徑移動到畫布中的指定點，不創建線條。
closePath()	創建從當前點回到起始點的路徑。
lineTo()	添加一個新點，然后在畫布中創建從該點到最后指定點的線條。
clip()	從原始畫布剪切任意形狀和尺寸的區域。
quadraticCurveTo()	創建二次貝塞爾曲線。
bezierCurveTo()	創建三次貝塞爾曲線。
arc()	創建弧/曲線（用於創建圓形或部分圓）。
arcTo()	創建兩切線之間的弧/曲線。
isPointInPath()	如果指定的點位於當前路徑中，則返回 true，否則返回 false。

轉換

方法	描述
scale()	縮放當前繪圖至更大或更小。
rotate()	旋轉當前繪圖。
translate()	重新映射畫布上的 (0,0) 位置。
transform()	替換繪圖的當前轉換矩陣。
setTransform()	將當前轉換重置為單位矩陣。然后運行 transform()。

文本

屬性	描述
font	設置或返回文本內容的當前字體屬性。
textAlign	設置或返回文本內容的當前對齊方式。
textBaseline	設置或返回在繪制文本時使用的當前文本基線。

 

方法	描述
fillText()	在畫布上繪制"被填充的"文本。
strokeText()	在畫布上繪制文本（無填充）。
measureText()	返回包含指定文本寬度的對象。

圖像繪制

方法	描述
drawImage()	向畫布上繪制圖像、畫布或視頻。

像素操作

屬性	描述
width	返回 ImageData 對象的寬度。
height	返回 ImageData 對象的高度。
data	返回一個對象，其包含指定的 ImageData 對象的圖像數據。

 

 

方法	描述
createImageData()	創建新的、空白的 ImageData 對象。
getImageData()	返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數據。
putImageData()	把圖像數據（從指定的 ImageData 對象）放回畫布上。