微信小程序·canvas 画布基本方法

//html
<canvas class="canvas" style="height:{{Height}}px;width:{{Width}}px;" type="2d" id="canvas" bindtouchmove="move" bindtouchstart="start" > </canvas>

//js-data 属性
    pen: 2,
    color: '#000fff',
    canvas: '',
    ctx: '',
    first: true,

//js-fun 画线
  start(e) {
    if (this.data.first) {
      this.clearClick();
      this.setData({
        first: false
      })
    }
    this.data.ctx.beginPath(); // 开始创建一个路径，如果不调用该方法，最后无法清除画布
    this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) // 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
  },
  move(e) {
    this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y) // 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
    this.data.ctx.stroke()
  },
  // 初始化Canvas
  createCanvas() {
    const query = wx.createSelectorQuery();
    query.select('#canvas').fields({
      node: true,
      size: true
    }).exec((res) => {
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d');
      canvas.width = this.data.Width; // 画布宽度
      canvas.height = this.data.Height; // 画布高度
      console.log(this.data.pen,this.data.color)
      //ctx.scale(pr, pr); // 缩放比
      ctx.lineGap = 'round'; //圆
      ctx.lineJoin = 'round'; //圆
      ctx.lineWidth = this.data.pen; // 字体粗细
      // ctx.font = '40px Arial'; // 字体大小，
      ctx.fillStyle = '#f00'; //设置字体颜色
      ctx.strokeStyle = '#f00'; //线条边框颜色
      //ctx.fillText('签名区', res[0].width, res[0].height)
      this.setData({
        ctx,
        canvas
      })
    })
  },

  clearClick() {//清除画布
    this.data.ctx.clearRect(0, 0, this.data.Width, this.data.Height);
    // clearRect(线条位置x,线条位置y,画宽,画高)
  },

var select = wx.createSelectorQuery();
    select.select('#canvas').context(res => {
      var ctx = res.context
      ctx.setFillStyle("#FF0000")
      //drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) 
      ctx.drawImage('../../static/cool.jpg', 200, 150, 160, 180, 70, 60, 160, 180); //图片
      ctx.draw() //开始绘制
    }).exec()

wx.canvasToTempFilePath({
      canvasId: "canvas",
      canvas: '',
     fileType: 'png', //jpg 、png
      width: 300, //指定画布区域
      height: 300, //指定画布区域
      x: 0, //指定画布区域的左上角横坐标
      y: 0, //指定画布区域的左上角纵坐标
      success(res) {
        console.log("图片地址", res.tempFilePath);
      }
    })

         ctx.font = '50px 宋体'; //设置字体大小
          ctx.fillStyle = '#000'; //设置字体颜色
          //绘制空心文字
          ctx.strokeStyle = '#f00'; //线条边框颜色
          ctx.strokeText('你好', 50, 250, 100); //内容 左 上 宽
          ctx.fillText('你好', 50, 250, 100); //内容 左 上 宽
          ctx.strokeStyle = '#abc'; //线条边框颜色

//设置线性渐变
          var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
          //从0到整个区域的一半由黄渐变到蓝
          //从中间到最后由蓝渐变到红
          gradient.addColorStop('0', '#abc');
          gradient.addColorStop('0.5', '#f11');
          gradient.addColorStop('1.0', '#fff');
          //应用渐变，空心文字
          ctx.strokeStyle = gradient;
          ctx.strokeText('Hello Canvas!!!', 0, 300, 500); //内容 左 上 宽
          //实心文字
          ctx.fillStyle = gradient;
          ctx.fillText('Hello World!!!', 0, 200, 500); //内容 左 上 宽

ctx.beginPath(); //开始绘制
ctx.closePath(); //关闭绘制
ctx.fillRect(0, 0, 321, 432); //x,y,w,h 画布大小

ctx.fillStyle = "#fff" //绘制背景颜色
ctx.fillRect(10,10,80,80); //绘制背景块

ctx.beginPath(); //开始绘制
        ctx.moveTo(10,200); // x,y 开始
        ctx.lineTo(100,200); // x,y 结束
        ctx.strokeStyle = "#f11";
        ctx.stroke(); //绘制
        ctx.closePath(); //关闭绘制

//画正方形横线
        ctx.beginPath(); //开始绘制
        ctx.moveTo(10, 10); // x,y 开始
        ctx.lineTo(10, 200); // x,y 结束
        ctx.lineTo(200, 200); // x,y 结束
        ctx.lineTo(200, 10); // x,y 结束
        ctx.lineTo(10, 10); // x,y 结束
        ctx.strokeStyle = "#f11";
        ctx.stroke(); //绘制