繪圖

簡(jiǎn)介

API

context 對(duì)象的方法列表

顏色氯质，樣式直焙，陰影

漸變

線條樣式

矩形

路徑

變形

文字

圖片

混合

其他

intro

WXML：

<canvas canvas-id="myCanvas" style="border:1px solid">

JS：（我們?cè)诮酉聛淼睦又袝?huì)將 JS 放在 onLoad 中）

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

步驟：

第一步：創(chuàng)建一個(gè) Canvas 繪圖上下文
const ctx = wx.createCanvasContext('myCanvas')

第二步：使用 Canvas 繪圖上下文進(jìn)行繪圖描述
//設(shè)置繪圖上下文的填充色為紅色：
ctx.setFillStyle('red')
//用 fillRect(x, y, width, height) 方法畫一個(gè)矩形卒蘸，填充為剛剛設(shè)置的紅色：
ctx.fillRect(10, 10, 150, 75)

第三步：畫圖
ctx.draw()

coordinates

canvas 是在一個(gè)二維的網(wǎng)格當(dāng)中雌隅。
左上角的坐標(biāo)為(0, 0)。
方法 fillRect(0, 0, 150, 75)缸沃。
它的含義為：從左上角(0, 0)開始恰起，畫一個(gè)150 x 75px 的矩形。

demo:
把手指放到 canvas 中趾牧，就會(huì)在下邊顯示出觸碰點(diǎn)的坐標(biāo)：

<canvas canvas-id="myCanvas"
  style="margin: 5px; border:1px solid #d3d3d3;"
  bindtouchstart="start"
  bindtouchmove="move"
  bindtouchend="end"/>

<view hidden="{{hidden}}">
  Coordinates: ({{x}}, {{y}})
</view>

Page({
  data: {
    x: 0,
    y: 0,
    hidden: true
  },
  start: function(e) {
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  move: function(e) {
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end: function(e) {
    this.setData({
      hidden: true
    })
  }
})

gradient

漸變
漸變能用于填充一個(gè)矩形检盼，圓，線翘单，文字等吨枉。填充色可以不固定位固定的一種顏色。
兩種顏色漸變的方式：
? createLinearGradient(x, y, x1, y1) - 創(chuàng)建一個(gè)線性的漸變
? createCircularGradient(x, y, r) - 創(chuàng)建一個(gè)從圓心開始的漸變
一旦我們創(chuàng)建了一個(gè)漸變對(duì)象哄芜，我們必須添加兩個(gè)顏色漸變點(diǎn)貌亭。
addColorStop(position, color) 方法用于指定顏色漸變點(diǎn)的位置和顏色，位置必須位于0到1之間认臊。
可以用setFillStyle() 和 setStrokeStyle() 方法設(shè)置漸變圃庭，然后進(jìn)行畫圖描述。

使用 createLinearGradient()

const ctx = wx.createCanvasContext('myCanvas')
const grd = ctx.createLinearGradient(0,0,200,0)
grd.addColorStop(0,'red')
grd.addColorStop(1,'white')

ctx.setFillStyle(grd)
ctx.fillRect(10,10,150,80)
ctx.draw()

使用 createCircularGradient()

const ctx = wx.createCanvasContext('myCanvas')
const grd = ctx.createCircularGradient(75,50,50)
grd.addColorStop(0,'red')
grd.addColorStop(1,'white')

ctx.setFillStyle(grd)
ctx.fillRect(10,10,150,80)
ctx.draw()

reference

API接口

context 對(duì)象的方法列表:顏色失晴，樣式剧腻，陰影

漸變

線條樣式

矩形

路徑

變形

文字

圖片

混合

其它

color

用以下幾種方式來表示 canvas 中使用的顏色：
? RGB 顏色： 如 'rgb(255, 0, 0)'
? RGBA 顏色：如 'rgba(255, 0, 0, 0.3)'
? 16 進(jìn)制顏色： 如 '#FF0000'
? 預(yù)定義的顏色： 如 'red'

wx.canvasToTempFilePath(OBJECT, this)

把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑;

wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success: function(res) {
    console.log(res.tempFilePath)
  } 

wx.canvasGetImageData(OBJECT)

返回一個(gè)數(shù)組制轰，用來描述 canvas 區(qū)域隱含的像素?cái)?shù)據(jù)
OBJECT參數(shù)說明：

示例代碼：

wx.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})

wx.canvasPutImageData(OBJECT)

將像素?cái)?shù)據(jù)繪制到畫布的方法

示例代碼：

const data = new Uint8ClampedArray([255, 0, 0, 1])
wx.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  data: data,
  success(res) {}
})

canvasContext.setFillStyle

設(shè)置填充色伶棒。

如果沒有設(shè)置 fillStyle，默認(rèn)顏色為 black;

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

canvasContext.setStrokeStyle

設(shè)置邊框顏色彩库。
Tip: 如果沒有設(shè)置 fillStyle肤无，默認(rèn)顏色為 black。

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

canvasContext.setShadow

設(shè)置陰影樣式骇钦。
Tip: 如果沒有設(shè)置宛渐，offsetX 默認(rèn)值為0， offsetY 默認(rèn)值為0眯搭， blur 默認(rèn)值為0窥翩，color 默認(rèn)值為 black。

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

canvasContext.shadowBlur
設(shè)置陰影的模糊級(jí)別

canvasContext.shadowBlur = value

canvasContext.shadowColor
設(shè)置陰影的顏色

canvasContext.shadowColor = value

canvasContext.shadowOffsetX
設(shè)置陰影相對(duì)于形狀在水平方向的偏移

canvasContext.shadowOffsetX = value

canvasContext.shadowOffsetY
設(shè)置陰影相對(duì)于形狀在豎直方向的偏移

canvasContext.shadowOffsetY = value

canvasContext.createLinearGradient

創(chuàng)建一個(gè)線性的漸變顏色鳍烁。
Tip: 需要使用 addColorStop() 來指定漸變點(diǎn)，至少要兩個(gè)繁扎。

eg:

const ctx = wx.createCanvasContext('myCanvas')

// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

canvasContext.createCircularGradient

創(chuàng)建一個(gè)圓形的漸變顏色。
Tip: 起點(diǎn)在圓心糊闽，終點(diǎn)在圓環(huán)梳玫。
Tip: 需要使用 addColorStop() 來指定漸變點(diǎn)，至少要兩個(gè)右犹。

eg:

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

canvasContext.addColorStop

定義
創(chuàng)建一個(gè)顏色的漸變點(diǎn)提澎。
Tip: 小于最小 stop 的部分會(huì)按最小 stop 的 color 來渲染，大于最大 stop 的部分會(huì)按最大 stop 的 color 來渲染念链。
Tip: 需要使用 addColorStop() 來指定漸變點(diǎn)盼忌，至少要兩個(gè)积糯。

eg:多彩

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

canvasContext.setLineWidth

設(shè)置線條的寬度。

eg:不同寬度的線條

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(5)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(15)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()

canvasContext.setLineCap

定義
設(shè)置線條的端點(diǎn)樣式谦纱。

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('butt')
ctx.setLineWidth(10)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('round')
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('square')
ctx.setLineWidth(10)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()

canvasContext.setLineJoin

定義
設(shè)置線條的交點(diǎn)樣式跨嘉。

語法：

canvasContext.setLineJoin(lineJoin)

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('bevel')
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('round')
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('miter')
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()

canvasContext.setLineDash

設(shè)置線條的寬度祠乃。

eg:虛線

const ctx = wx.createCanvasContext('myCanvas')

ctx.setLineDash([10, 20], 5);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.draw()

canvasContext.setMiterLimit

定義
設(shè)置最大斜接長(zhǎng)度梦重，斜接長(zhǎng)度指的是在兩條線交匯處內(nèi)角和外角之間的距離。 當(dāng) setLineJoin() 為 miter 時(shí)才有效亮瓷。超過最大傾斜長(zhǎng)度的琴拧，連接處將以 lineJoin 為 bevel 來顯示
語法

canvasContext.setMiterLimit(miterLimit)

eg:線的傾斜角度

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(1)
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(2)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(3)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(4)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()

canvasContext.rect

定義
創(chuàng)建一個(gè)矩形。
Tip: 用 fill() 或者 stroke() 方法將矩形真正的畫到 canvas 中嘱支。

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.rect(10, 10, 150, 75)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.fillRect

定義
填充一個(gè)矩形蚓胸。
Tip: 用 setFillStyle() 設(shè)置矩形的填充色，如果沒設(shè)置默認(rèn)是黑色

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

canvasContext.strokeRect

定義
畫一個(gè)矩形(非填充)斗塘。
Tip: 用 setFillStroke() 設(shè)置矩形線條的顏色赢织，如果沒設(shè)置默認(rèn)是黑色。

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

canvasContext.clearRect

定義
清除畫布上在該矩形區(qū)域內(nèi)的內(nèi)容馍盟。

Tip: clearRect 并非畫一個(gè)白色的矩形在地址區(qū)域于置，而是清空

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.fillRect(0, 0, 150, 200)
ctx.setFillStyle('blue')
ctx.fillRect(150, 0, 150, 200)
ctx.clearRect(10, 10, 150, 75)
ctx.draw()

canvasContext.fill

定義
對(duì)當(dāng)前路徑中的內(nèi)容進(jìn)行填充。默認(rèn)的填充色為黑色贞岭。
Tip: 如果當(dāng)前路徑?jīng)]有閉合八毯，fill() 方法會(huì)將起點(diǎn)和終點(diǎn)進(jìn)行連接，然后填充瞄桨，詳情見例一话速。
Tip: fill() 填充的的路徑是從 beginPath() 開始計(jì)算，但是不會(huì)將 fillRect() 包含進(jìn)去芯侥。

eg:填充三角形

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.fill()
ctx.draw()

eg:填充矩形

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.stroke

定義
畫出當(dāng)前路徑的邊框泊交。默認(rèn)顏色色為黑色。
Tip: stroke() 描繪的的路徑是從 beginPath() 開始計(jì)算柱查，但是不會(huì)將 strokeRect() 包含進(jìn)去

eg:畫路徑（線條）

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()

eg2:

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setStrokeStyle('yellow')
ctx.stroke()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only stoke this rect, not in current path
ctx.setStrokeStyle('blue')
ctx.strokeRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will stroke current path
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()

canvasContext.beginPath

定義
開始創(chuàng)建一個(gè)路徑廓俭，需要調(diào)用fill或者stroke才會(huì)使用路徑進(jìn)行填充或描邊。
Tip: 在最開始的時(shí)候相當(dāng)于調(diào)用了一次 beginPath()唉工。
Tip: 同一個(gè)路徑內(nèi)的多次setFillStyle()研乒、setStrokeStyle()、setLineWidth()等設(shè)置淋硝，以最后一次設(shè)置為準(zhǔn)

eg:

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setFillStyle('yellow')
ctx.fill()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.closePath

定義
關(guān)閉一個(gè)路徑
Tip: 關(guān)閉路徑會(huì)連接起點(diǎn)和終點(diǎn)雹熬。
Tip: 如果關(guān)閉路徑后沒有調(diào)用 fill() 或者 stroke() 并開啟了新的路徑宽菜，那之前的路徑將不會(huì)被渲染;

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()
ctx.stroke()
ctx.draw()

eg2:

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.closePath()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only fill this rect, not in current path
ctx.setFillStyle('blue')
ctx.fillRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will fill current path
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

canvasContext.moveTo

定義
把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條竿报。
Tip: 用 stroke() 方法來畫線條

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)

ctx.moveTo(10, 50)
ctx.lineTo(100, 50)
ctx.stroke()
ctx.draw()

canvasContext.lineTo

定義
lineTo 方法增加一個(gè)新點(diǎn)铅乡，然后創(chuàng)建一條從上次指定點(diǎn)到目標(biāo)點(diǎn)的線。
Tip: 用 stroke() 方法來畫線條

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()

canvasContext.arc

定義
畫一條弧線仰楚。
Tip: 創(chuàng)建一個(gè)圓可以用 arc() 方法指定其實(shí)弧度為0隆判，終止弧度為 2 * Math.PI。
Tip: 用 stroke() 或者 fill() 方法來在 canvas 中畫弧線僧界。

eg:圓

const ctx = wx.createCanvasContext('myCanvas')

// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#EEEEEE')
ctx.fill()

ctx.beginPath()
ctx.moveTo(40, 75)
ctx.lineTo(160, 75)
ctx.moveTo(100, 15)
ctx.lineTo(100, 135)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

ctx.setFontSize(12)
ctx.setFillStyle('black')
ctx.fillText('0', 165, 78)
ctx.fillText('0.5*PI', 83, 145)
ctx.fillText('1*PI', 15, 78)
ctx.fillText('1.5*PI', 83, 10)

// Draw points
ctx.beginPath()
ctx.arc(100, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(100, 25, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.beginPath()
ctx.arc(150, 75, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

// Draw arc
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
ctx.setStrokeStyle('#333333')
ctx.stroke()

ctx.draw()

canvasContext.bezierCurveTo

定義
創(chuàng)建三次方貝塞爾曲線路徑葬荷。
Tip: 曲線的起始點(diǎn)為路徑中前一個(gè)點(diǎn)涨共。

eg:不規(guī)則曲線

const ctx = wx.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.arc(200, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(150, 75)

ctx.moveTo(200, 20)
ctx.lineTo(200, 100)
ctx.lineTo(70, 75)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()

canvasContext.quadraticCurveTo

定義
創(chuàng)建二次貝塞爾曲線路徑。
Tip: 曲線的起始點(diǎn)為路徑中前一個(gè)點(diǎn)宠漩。

eg:

const ctx = wx.createCanvasContext('myCanvas')

// Draw points
ctx.beginPath()
ctx.arc(20, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()

ctx.beginPath()
ctx.arc(200, 20, 2, 0, 2 * Math.PI)
ctx.setFillStyle('lightgreen')
ctx.fill()

ctx.beginPath()
ctx.arc(20, 100, 2, 0, 2 * Math.PI)
ctx.setFillStyle('blue')
ctx.fill()

ctx.setFillStyle('black')
ctx.setFontSize(12)

// Draw guides
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.lineTo(20, 100)
ctx.lineTo(200, 20)
ctx.setStrokeStyle('#AAAAAA')
ctx.stroke()

// Draw quadratic curve
ctx.beginPath()
ctx.moveTo(20, 20)
ctx.quadraticCurveTo(20, 100, 200, 20)
ctx.setStrokeStyle('black')
ctx.stroke()

ctx.draw()

canvasContext.scale

定義
在調(diào)用scale方法后举反，之后創(chuàng)建的路徑其橫縱坐標(biāo)會(huì)被縮放。多次調(diào)用scale扒吁，倍數(shù)會(huì)相乘火鼻。

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)

ctx.draw()

canvasContext.rotate

定義
以原點(diǎn)為中心盼铁，原點(diǎn)可以用 translate方法修改粗蔚。順時(shí)針旋轉(zhuǎn)當(dāng)前坐標(biāo)軸。多次調(diào)用rotate饶火，旋轉(zhuǎn)的角度會(huì)疊加鹏控。

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)
ctx.rotate(20 * Math.PI / 180)
ctx.strokeRect(100, 10, 150, 100)

ctx.draw()

canvasContext.translate

定義
對(duì)當(dāng)前坐標(biāo)系的原點(diǎn)(0, 0)進(jìn)行變換牧挣，默認(rèn)的坐標(biāo)系原點(diǎn)為頁面左上角。

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)

ctx.draw()

canvasContext.clip

clip() 方法從原始畫布中剪切任意形狀和尺寸醒陆。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪問畫布上的其他區(qū)域）裆针∨倌Γ可以在使用 clip() 方法前通過使用 save() 方法對(duì)當(dāng)前畫布區(qū)域進(jìn)行保存寺晌，并在以后的任意時(shí)間對(duì)其進(jìn)行恢復(fù)（通過 restore() 方法）。

eg:裁剪圖片

const ctx = wx.createCanvasContext('myCanvas')

wx.downloadFile({
  url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
  success: function(res) {
      ctx.save()
      ctx.beginPath()
      ctx.arc(50, 50, 25, 0, 2*Math.PI)
      ctx.clip()
      ctx.drawImage(res.tempFilePath, 25, 25)
      ctx.restore()
      ctx.draw()
  }
})

canvasContext.setFontSize

定義
設(shè)置字體的字號(hào)澡刹。

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('20', 20, 20)
ctx.setFontSize(30)
ctx.fillText('30', 40, 40)
ctx.setFontSize(40)
ctx.fillText('40', 60, 60)
ctx.setFontSize(50)
ctx.fillText('50', 90, 90)

ctx.draw()

canvasContext.fillText

定義
在畫布上繪制被填充的文本呻征。

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('Hello', 20, 20)
ctx.fillText('MINA', 100, 100)

ctx.draw()

canvasContext.setTextAlign

用于設(shè)置文字的對(duì)齊

canvasContext.setTextAlign(align)

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()

canvasContext.setTextBaseline

用于設(shè)置文字的水平對(duì)齊
canvasContext.setTextBaseline(textBaseline)

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(5, 75)
ctx.lineTo(295, 75)
ctx.stroke()

ctx.setFontSize(20)

ctx.setTextBaseline('top')
ctx.fillText('top', 5, 75)

ctx.setTextBaseline('middle')
ctx.fillText('middle', 50, 75)

ctx.setTextBaseline('bottom')
ctx.fillText('bottom', 120, 75)

ctx.setTextBaseline('normal')
ctx.fillText('normal', 200, 75)

ctx.draw()

canvasContext.drawImage

定義
繪制圖像到畫布。

eg:

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

canvasContext.setGlobalAlpha

設(shè)置全局畫筆透明度。

canvasContext.setGlobalAlpha(alpha)

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.setGlobalAlpha(0.2)
ctx.setFillStyle('blue')
ctx.fillRect(50, 50, 150, 100)
ctx.setFillStyle('yellow')
ctx.fillRect(100, 100, 150, 100)

ctx.draw()

canvasContext.save

定義
保存當(dāng)前的繪圖上下文。

restore
定義
恢復(fù)之前保存的繪圖上下文凌那。

eg:

const ctx = wx.createCanvasContext('myCanvas')

// save the default fill style
ctx.save() 
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)

// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)

ctx.draw()

canvasContext.draw

定義
將之前在繪圖上下文中的描述（路徑兼雄、變形、樣式）畫到 canvas 中帽蝶。
Tip: 繪圖上下文需要由 wx.createCanvasContext(canvasId) 來創(chuàng)建赦肋。

eg:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.draw()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()

canvasContext.measureText

測(cè)量文本尺寸信息，目前僅返回文本寬度嘲碱。同步接口金砍。

參數(shù):
text String 要測(cè)量的文本

返回 TextMetrics 對(duì)象:
width Number 文本的寬度

eg:

const ctx = wx.createCanvasContext('myCanvas')
ctx.font = 'italic bold 20px cursive'
const metrics = ctx.measureText('Hello World')
console.log(metrics.width)

canvasContext.globalCompositeOperation

該屬性是設(shè)置要在繪制新形狀時(shí)應(yīng)用的合成操作的類型。

語法：
canvasContext.globalCompositeOperation = type

參數(shù)：
type String 標(biāo)識(shí)要使用哪種合成或混合模式操作

canvasContext.arcTo

根據(jù)控制點(diǎn)和半徑繪制圓弧路徑麦锯。

語法
canvasContext.arcTo(x1, y1, x2, y2, radius)

參數(shù)

canvasContext.strokeText

給定的 (x, y) 位置繪制文本描邊的方法

語法
canvasContext.strokeText(text, x, y, maxWidth)

canvasContext.lineDashOffset

設(shè)置虛線偏移量的屬性
語法
canvasContext.lineDashOffset = value

canvasContext.createPattern

對(duì)指定的圖像創(chuàng)建模式的方法扶欣，可在指定的方向上重復(fù)元圖像
語法
canvasContext.createPattern(image, repetition)

eg:

const ctx = wx.createCanvasContext('myCanvas')
const pattern = ctx.createPattern('/path/to/image', 'repeat-x')
ctx.fillStyle = pattern
ctx.fillRect(0, 0, 300, 150)
ctx.draw()

canvasContext.setTransform

使用矩陣重新設(shè)置（覆蓋）當(dāng)前變換的方法
語法
canvasContext.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)