1. canvas 标签默认宽度300px、高度225px
2. 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

实例：

  <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

设置阴影

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横纵坐标缩放的倍数

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标签属性，可做参考 

颜色、样式和阴影

线条样式

矩形

路径

转换

文本

图像绘制

像素操作