小程序API（1.3）创建绘图上下文，并利用绘图上下文绘制图形和设置图形样式

 

<!--pages/index.wxml-->
<view class="box">
  <view class='title'>基本绘图</view>
  <view>
    <canvas canvas-id="myCanvas" ></canvas>
  </view>

  <view class='btnLayout'>
    <button type='primary' bindtap="clear">清除</button>
    <button type='primary' bindtap="drawDot">画点</button>
    <button type='primary' bindtap="drawCircle">画圆</button>
  </view>

  <view class='btnLayout'>
    <button type='primary' bindtap="drawDash">画虚线</button>
    <button type='primary' bindtap="capAndJoin">端点交点</button>
    <button type='primary' bindtap="drawText">画字</button>
  </view>

  <view class='btnLayout'>
    <button type='primary' bindtap="circularGrad">圆形渐变</button>
    <button type='primary' bindtap="shadowRect">阴影矩形</button>
    <button type='primary' bindtap="translucent">半透明</button>
  </view>
</view>

canvas-id必须指定，后面要利用它创建绘图上下文

/* pages/index.wxss */

canvas {
  width: 100%;
  height: 340px;
  background-color: cornflowerblue;
}

button {
  width: 100px;
}

.btnLayout {
  display: flex;/*flex布局*/
  flex-direction: row;/*行布局*/
  margin: 10px;/*上下左右都是10个像素*/
  justify-content: space-around; /* 弹性项目沿主轴方向（水平方向）平均分布，两边留有一半的间隔空间。 */
}

// pages/index.js
var ctx = wx.createCanvasContext('myCanvas') //创建画布绘图环境，定义全局变量利用API函数创建绘图上下文，函数参数是画布id号
Page({
  clear: function() {
    ctx.draw() //调用绘图上下文的draw，刷新屏幕，显示绘制效果（无参数或参数为false时要先清除画布）
  },
  drawDot: function(e) {
    ctx.arc(200, 200, 10, 0, 2 * Math.PI) //绘制圆形，前两个参数圆弧的圆心，然后圆弧的半径，绘制圆弧的起点角度，绘制圆弧的终点角度
    ctx.setFillStyle('black') //设置填充样式，黑色填充
    ctx.fill() //执行填充，对当前路径中的内容进行填充。默认的填充色为黑色。
    ctx.draw() //刷新屏幕，显示绘制效果（无参数或参数为false时要先清除画布）
  },
  drawCircle: function() {
    //画点
    ctx.setFillStyle('black') //设置填充色
    ctx.arc(200, 200, 10, 0, 2 * Math.PI)
    ctx.fill()

    ctx.setStrokeStyle('red') //设置描边（线条）颜色
    ctx.moveTo(300, 200) //把路径移动到画布中的指定点，不创建线条
    ctx.arc(200, 200, 100, 0, 2 * Math.PI) //创建以(200,200)为圆心,以100为半径的圆（从0到2PI绘制一整个圆）
    ctx.stroke() //画出当前路径的边框
    ctx.draw() //刷新屏幕，显示绘制效果
  },


  drawDash: function() {
    ctx.setStrokeStyle('red')//设置线条颜色为红色
    ctx.setLineDash([20, 10]) //设置虚线样式，长度是20，线条与线条之间的间隔是10
    ctx.setLineWidth(10) //设置线宽，宽度是10
    ctx.moveTo(50, 100) //把路径移动到画布中的指定点，坐标原点在左上角，向下是y的方向，向右是x轴的方向，x=50,y=100
    ctx.lineTo(250, 100) //增加一个新点，然后创建一条从上次指定点到目标点的线
    ctx.lineTo(150, 300)
    ctx.lineTo(50, 100)//最后绘制出了一个虚线的三角形
    ctx.stroke() //画出当前路径的边框
    ctx.draw() //刷新屏幕，显示绘制效果
    ctx.setLineDash([0, 0]) //恢复默认线条样式
    ctx.setLineWidth(1) //恢复默认线条宽度
  },

  capAndJoin: function () {
    ctx.setStrokeStyle('red')
    ctx.setLineWidth(20)
    ctx.setLineCap('round') //设置线条端点样式，圆形
    ctx.setLineJoin('miter') //设置线条连接样式，尖形
    ctx.moveTo(50, 50)
    ctx.lineTo(250, 50)
    ctx.lineTo(50, 250)
    ctx.lineTo(250, 250)
    ctx.stroke()
    ctx.draw()
    ctx.setLineWidth(1) //恢复默认设置
    ctx.setLineCap('butt') //恢复默认设置
    ctx.setLineJoin('mitter') //恢复默认设置
  },

  drawText: function() {
    ctx.setFillStyle('red')
    ctx.setFontSize(40) //设置字体大小
    ctx.setTextBaseline('bottom') //设置文本基线，绘制文本的时候以谁为标准的线
    ctx.fillText('你笑的真好看', 80, 80) //在画布上绘制被填充的文本

    ctx.setFillStyle('yellow')
    ctx.setTextBaseline('top')
    ctx.fillText('你笑的真好看', 80, 80)//80，80起点坐标

    ctx.setFillStyle('black')
    ctx.rotate(30 * Math.PI / 180) //旋转字体，坐标原点顺时针旋转PI/6=30度
    ctx.fillText('你笑的真好看', 150, 80)

    ctx.draw()
  },

  circularGrad: function() {
    var grd = ctx.createCircularGradient(175, 175, 125) //首先创建一个圆形渐变的样式，通过调用绘图上下文的API函数createCircularGradient实现，创建以点(175,175)为圆心，以125为半径的圆形渐变
    grd.addColorStop(0, 'purple') //添加渐变起点，紫色
    grd.addColorStop(1, 'white') //添加渐变终点，白色
    ctx.setFillStyle(grd) //设置圆形渐变填充样式(设置填充的颜色就是这种圆形渐变,首先创建这种样式，然后设置这种样式)
    ctx.fillRect(50, 50, 250, 250) //绘制填充矩形，创建起点(50,50)，宽度和高度都为250的填充矩形，中心点正好是175，175
    ctx.draw()
  },
  shadowRect: function() {
    ctx.setFillStyle('orange')
    ctx.setShadow(20, 20, 50, 'yellow') //设置阴影，水平方向和垂直方向都是20，模糊级别50
    ctx.fillRect(50, 50, 250, 250)
    ctx.draw()
  },
  translucent: function() {
    ctx.setFillStyle('red')
    ctx.setGlobalAlpha(0.2) //设置全局透明度(整个画布的透明度是0-1)
    ctx.fillRect(50, 50, 250, 250)
    ctx.draw()
    ctx.setGlobalAlpha(1) //恢复以前设置 
  }

})

利用API函数创建画布绘图上下文对象

　　CanvasContext wx.createCanvasContext ( string canvasId, Object this ) 用于创建画布绘图 上下文对象，参数canvasId是canvas组件的id ， this是指在自定义组件下的当前组件实例，返回值 为CanvasContext对象。

利用画布绘图上下文对象绘图和设置图形样式 

　　利用画布绘图上下文对象可以绘制图形和设置图形样式，其常用方法如下：

　　　　arc()：创建一条弧线路径。

　　　　draw()：将之前在绘图上下文中的描述（路径、 变形、样式）画到canvas中。无参数或参数为false 时要先清除画布。

　　　　stroke()：画出当前路径的边框。

　　　　fill()：对当前路径中的内容进行填充。

　　　　createCircularGradient()：创建圆形渐变颜色。

　　　　setLineCap()：设置线条端点样式，包括：butt、 round和square 。

　　　　setLineJoin()：设置线条交点样式，包括：bevel、 round和miter 。

　　　　setFontSize()：设置字体的字号。

　　　　setTextBaseline() ：设置文字的竖直对齐。

　　　　createCircularGradient()：创建圆形渐变颜色。

　　　　setShadow()：设置阴影样式。

　　　　setGlobalAlpha ()：设置画笔全局透明度。